Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ゆるく学ぶWebフォント@フォントお姉さん

28d290b15ab4bbcea9ca5aefb01b3d1c?s=47 mari
December 01, 2019

 ゆるく学ぶWebフォント@フォントお姉さん

2019年12月1日、さくらクラブJavaScriptプログラミングもくもく勉強会で使用したスライドです。

[スライド内で紹介したサイトURL]

・食パンが美味しそうな豊中市のカフェ
https://csterrace.com/

・和歌山の工務店
https://www.asairyo.com/

・千葉県浦安市のこども歯科
https://nanairokodomo.com/

・Google Fonts(無料)のおすすめ欧文フォント
https://font-friends.com/fonts/index.html

28d290b15ab4bbcea9ca5aefb01b3d1c?s=128

mari

December 01, 2019
Tweet

Transcript

  1. ΏΔֶ͘Ϳ8FCϑΥϯτ CZϑΥϯτ͓࢞͞Μ

  2. ࣗݾ঺հ ·Γ ϑΥϯτ͓࢞͞Μ˞ࣗশ ೥݄ɺେࡕࢢ಺ͷ8FC੍࡞ձࣾʹస৬ɻσβΠφʔŋίʔμʔɻ Ұ೥ޙɺ8FCܥͷηϛφʔʹࢀՃͨ͠ࡍɺʮϑΥϯτ͓͡͞ΜʯͷଘࡏΛ஌Γ ϑΥϯτʹڵຯΛ࣋ͪ࢝ΊΔɻ ͔ͦ͜ΒϑΥϯτʹؔΘΔษڧձ΍ΠϕϯτʹੵۃతʹࢀՃ͢ΔΑ͏ʹͳΓɺ ʮϑΥϯτ͓࢞͞ΜʯΛ໊৐Γ͸͡ΊΔɻ

  3. 8FCϑΥϯτͱ͸ʁ

  4. 8FCϑΥϯτͱ͸ʁ Πϯλʔωοτ্ʹ͋ΔϑΥϯτϑΝΠϧΛ ݺͼग़ͯ͠8FCϖʔδʹදࣔ͢Δٕज़ɻ

  5. 8FCϑΥϯτͱ͸ʁ ͜Ε·Ͱ ੍࡞ଆ͕ࢦఆͨ͠ϑΥϯτ͕Ϣʔβʔͷ σόΠεʹೖ͍ͬͯͳ͚Ε͹ผͷϑΥϯτ͕දࣔ͞Ε͍ͯͨɻ body { font-family: 'YuGothic','Hiragino Kaku Gothic

    ProN’, 'ώϥΪϊ֯ΰ ProN W6’,'ϝΠϦΦ', 'Meiryo','̢̨ ΰγοΫ’,sans-serif; } ͋ ͋ ͋
  6. 8FCϑΥϯτͱ͸ʁ 8FCϑΥϯτͷಋೖʹΑͬͯ ͲͷσόΠεͰ΋੍࡞ଆ͕ҙਤͨ͠௨ΓͷϑΥϯτͰ දࣔͤ͞Δ͜ͱ͕Ͱ͖ΔΑ͏ʹͳͬͨɻ body { font-family: 'FOT-ͭ͹Ί Std R';

    } ͋ ͋ ͋
  7. 8FCϑΥϯτͷϝϦοτ

  8. 8FCϑΥϯτͷϝϦοτ ⁞දݱͷ෯͕޿͕Δɻ ɹˠαΠτͷҹ৅Λ؆୯ʹม͑ΒΕΔɻ  ࢖͍͍ͨϑΥϯτΛը૾Խ͠ͳ͍͍ͯ͘ɻ ɹˠमਖ਼ָ͕ɻ ⁠ςΩετͳͷͰଟݴޠରԠ͠΍͍͢ɻ

  9. 8FCϑΥϯτ࢖༻ࣄྫ

  10. 8FCϑΥϯτ࢖༻ࣄྫ ৯ύϯ͕ඒຯͦ͠͏ͳ๛தࢢͷΧϑΣ IUUQTDTUFSSBDFDPN ˠ࢖༻ϑΥϯτɿPlayfair Displayʢ(PPHMF'POUTʣ ࿨Վࢁͷ޻຿ళ IUUQTXXXBTBJSZPDPN ˠ࢖༻ϑΥϯτɿJosefin Sans /

    Crimson Text ʢ(PPHMF'POUTʣ ઍ༿ݝӜ҆ࢢͷ͜Ͳ΋ࣃՊ IUUQTOBOBJSPLPEPNPDPN ˠ࢖༻ϑΥϯτɿBrandon Grotesqueʢ"EPCF'POUTʣ
  11. ͓͢͢ΊϑΥϯτ

  12. ͓͢͢ΊϑΥϯτ (PPHMF'POUT ແྉ ͷ͓͢͢ΊԤจϑΥϯτ IUUQTGPOUGSJFOETDPNGPOUTJOEFYIUNM

  13. ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ