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

Symbol Font in Web

Symbol Font in Web

「シンボルフォントで広がるフラットデザインの可能性」

Tsutomu Kawamura

March 08, 2014
Tweet

More Decks by Tsutomu Kawamura

Other Decks in Design

Transcript

  1. TTF EOT WOFF SVG IE 4 ✔ 9 ✔ ✔

    FireFox 3.5 ✔ 3.6 ✔ ✔ Safari 3.1 ✔ ✔ 5.1 ✔ ✔ ✔ Chrome 4 ✔ ✔ 6 ✔ ✔ ✔ iOS 4 ✔ 4.2 ✔ ✔ 5.1 ✔ ✔ ✔ Android 2.2 ✔ 3.1 ✔ ✔ current ✔ ✔ ✔ ϒϥ΢β ରԠঢ়گ
  2. @font-face { font-family: 'MyIcons'; src: url(‘MyIcons.ttf') format('truetype'); } <span class=”mi

    mi-good”></span> <i class=”mi mi-good”></i> <i class=”mi”>good</i> ྫ ྫ ྫ
  3. •G IF •ಁ ա PN G •CSSε ϓ ϥ Π

    τ •SVG ? •W eb ϑ Υ ϯ τ ! • PUA Λ ࢖ ͏ • Ligature (߹ ࣈ ) • ଟ ৭ ࡮ Γ ΄ ͔
  4. ࠕࡦࡀ࡮ࡈ࡜ࡦࠢ࡮࡜ࠗࡉ࡜࡝࡯ ⺒߻ ୫ࠅࠆ ⾈߁ 㘩ߴࠆ Anne Frank Micro Library Project

    http://annelibrary.github.io/ ಡΈฦͯ͠Έͯ ߟ͑Α͏ ެཱਤॻؗʹ आΓʹ͍͜͏ ಡΜͰɺ༑ୡʹ ଃΖ͏ ϑϥϯΫϑϧτΛ ยखʹޠΓ߹͓͏ʂ ޟᣣ⸥ޠ ࠍ⟎ߊ ৻✜ߦ⟎߈ߚ޿ ᧄࠍਗߴࠆ ͓ళʹɺΦϑΟεʹɻ ࣗ୐ͷຊ୨ʹɻ ϥΠϒϥϦʔͷ։͖ํ ΞΫγϣϯΛ͓͜͢ Nj Ȝ Ƕ Ƥ థ ֘ 451 ʮΞϯωɾϑϥϯΫɾϥΠϒϥϦʔʯ͸ɺ୭Ͱ΋ࢀՃͰ͖ ΔϓϩδΣΫτͰ͢ɻ߹ݴ༿͸ ʮಡΉ͜ͱ΋ϥΠϒϥϦʔɺ आΓΔͷ΋ϥΠϒϥϦʔɺຊΛஔ͘ͷ΋ޠΓ߹͏ͷ΋ ϥΠϒϥϦʔʯ ɻৄ͘͠͸ͪ͜Β·Ͱɻ  ݩʹͨ͠ϙελʔ γϯϓϧɻϑϥοτɻ ςʔϚຖͷΞΠίϯ ͜ͷล͸ɺ'POU"XFTPNF ਫฏઢ΋ΞΠίϯ ୊ࣈ͸5ZQF4RVBSF Πϥετ΋ എܠ΋
  5. GIF JPEG PNG SVG ϑΥϯτ ࣸਅ × ˕ ˚ ×

    × Πϥετ × ˚ ◦ ˕ × ϩΰ ˚ × ◦ ◦ ˕ ΞΠίϯ ˚ × ˚ ˚ ˕ ը૾PSϑΥϯτ
  6. งғؾͷσβΠϯ ཁૉͷΞΠίϯԽ ͱΓ͋͑ͣ഑ஔ Ϩεϙϯγϒௐ੔ ϑϥοτσβΠϯͷϑϩʔ ࠕࡦࡀ࡮ࡈ࡜ࡦࠢ࡮࡜ࠗࡉ࡜࡝࡯ ⺒߻ ୫ࠅࠆ ⾈߁ 㘩ߴࠆ

    Anne Frank Micro Library Project http://annelibrary.github.io/ ಡΈฦͯ͠Έͯ ߟ͑Α͏ ެཱਤॻؗʹ आΓʹ͍͜͏ ಡΜͰɺ༑ୡʹ ଃΖ͏ ϑϥϯΫϑϧτΛ ยखʹޠΓ߹͓͏ʂ ޟᣣ⸥ޠ ࠍ⟎ߊ ৻✜ߦ⟎߈ߚ޿ ᧄࠍਗߴࠆ ͓ళʹɺΦϑΟεʹɻ ࣗ୐ͷຊ୨ʹɻ ϥΠϒϥϦʔͷ։͖ํ ΞΫγϣϯΛ͓͜͢ Nj Ȝ Ƕ Ƥ థ ֘ 451 ʮΞϯωɾϑϥϯΫɾϥΠϒϥϦʔʯ͸ɺ୭Ͱ΋ࢀՃͰ͖ ΔϓϩδΣΫτͰ͢ɻ߹ݴ༿͸ ʮಡΉ͜ͱ΋ϥΠϒϥϦʔɺ आΓΔͷ΋ϥΠϒϥϦʔɺຊΛஔ͘ͷ΋ޠΓ߹͏ͷ΋ ϥΠϒϥϦʔʯ ɻৄ͘͠͸ͪ͜Β·Ͱɻ 
  7. (MZQIT.JOJ=  'POU1SFQ= OTF TTF SVG EOT WOFF ग़ྗ ม׵

    8FCϑΥϯτ (6*ΞϓϦ͚ͩͰ׬݁ɻϑΥϯτ޷͖޲͚ Aίʔε
  8. *MMVTUSBUPS=  TTF SVG EOT WOFF ग़ྗ ม׵ 8FCϑΥϯτ $44

    ࢖͍׳Εͨ*MMVTUSBUPSͰ͸͡ΊΔɺϑΥϯτϥΠϑ Bίʔε SVG CSS *DP.PPO=ʙ
  9. 4LFUDI=  TTF SVG EOT WOFF ग़ྗ ม׵ 8FCϑΥϯτ $44

    ΠνΦγɺ׬શࣗಈԽΞΠίϯ੍࡞؀ڥ Cίʔε SVG CSS (SVOU=
  10. Recipe w .BD8JOEPXT w "EPCF*MMVTUSBUPS w *DP.PPO 8FCΞϓϦ  w

    )5.-$44ͷجૅ஌ࣝ άϦου ϕδΣۂઢ
  11. )5.-ͷฤू  Recipe <link href="css/anne-library.css" rel="stylesheet"> <i class="ai ai-girl"></i> <i class="fa

    fa-twitter"></i> ࢀߟ'POU"XFTPNF ্ ɺ(MZQIJDPO Լ <i class="glyphicon glyphicon-cloud"></i>
  12. )5.-ͷฤू⁠ Recipe <i class="ai ai-girl"></i> <i class="fa fa-twitter"></i> <i class="fa

    fa-facebook"></i> <i class="ai ai-read"></i> <i class="ai ai-borrow"></i> <i class="ai ai-buy"></i> <i class="ai ai-eat"></i>
  13. $44ͷΞΠσΞ⁞ Recipe ! .title > i { font-size: 800%; background:

    #fff; border-radius: .5em; width: 1em; }  QY SFN FN ؙғΈ
  14. $44ͷΞΠσΞ  Recipe .title-hr { border-top: 3px solid #423933; } 

    QY FN ਫฏઢ .title-hr > i { font-size: 600%; margin: -.5em 0; }