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

Symbol Font in Web

Symbol Font in Web

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

2be94635664f02d169e343e4024f0ad5?s=128

Tsutomu Kawamura

March 08, 2014
Tweet

Transcript

  1. γϯϘϧϑΥϯτ Ͱ޿͕ΔϑϥοτσβΠϯͷՄೳੑ  Տଜ঑ (Tsutomu Kawamura)  facebook.com/cognitom

  2. Introduction σϞαΠτ γϯϘϧϑΥϯτͷ࡞Γํ γϯϘϧϑΥϯτͷ࢖͍ํ ࣗಈԽ http://bit.ly/SymbolFont ͋ͱͰ࢖͏ͷͰɺ μ΢ϯϩʔυ͍ͯͩ͘͠͞ɻ

  3. + + ৭ʑ

  4. Introduction

  5. ࠓ೔࿩͢ͷ͸ɺίϨɻ

  6. γϯϘϧϑΥϯτ Symbol fonts?

  7. ͨͱ͑͹ɺ ͜Εɻ

  8.  ͜Ε΋ɺ

  9. ͜Ε΋ ϑΥϯτɻ

  10. Webdings !"#$%&' Wingdings !"#$%&' Arial ABCDEFGHI ੲ͔Β͓ͳ͡Έ

  11. 8&#ϑΥϯτͬͯ

  12. ͜Μͳͷ

  13. ͜Μͳͷ

  14. ͜Μͳͷ

  15. ͜Μͳͷ

  16. ͜Ε͚ͩɻ <link! rel="stylesheet"! type="text/css"! href="http://fonts.googleapis.com/css?! family=Tangerine" />

  17. 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 ✔ ✔ ✔ ϒϥ΢β ରԠঢ়گ
  18. γϯϘϧϑΥϯτ  8&#ϑΥϯτ

  19. ίϨͰ͢ɻ

  20. @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> ྫ ྫ ྫ
  21. Կ͕ඒຯ͍͠ͷ u

  22. ͳΊΒ͔ɻ3FUJOB3FBEZ

  23. $44Ͱ৭ίϯτϩʔϧ

  24. αʔόϦΫΤετݮ଎͍ WOFF

  25. γϯϘϧϑΥϯτͳ 8&#αΠτ

  26. Octicons

  27. None
  28. None
  29. None
  30. Segoe UI Symbol

  31. γϯϘϧϑΥϯτ ͍Ζ͍Ζ

  32. Font Awesome w ਓؾͰ͢ɻͲͷ͘Β͍  w (JU)VCͰ˒ສ w ࢀߟ·Ͱʜ w

    #PPUTUSBQ˒ສ w K2VFSZ˒ສ
  33. 369 icons

  34. open source!

  35. http://symbolset.com http://icomoon.io http://kudakurage.com/ligature_symbols/

  36. GLYPHICONS

  37. None
  38. None
  39. •G IF •ಁ ա PN G •CSSε ϓ ϥ Π

    τ •SVG ? •W eb ϑ Υ ϯ τ ! • PUA Λ ࢖ ͏ • Ligature (߹ ࣈ ) • ଟ ৭ ࡮ Γ ΄ ͔
  40. FontAwesome ͳͲ ಠࣗΞΠίϯ͕
 ͍͔ͭ͸ඞཁ FontAwesome + ಠࣗΞΠίϯPNG iconࢦఆʹ2ܥ౷ →Ή͖ʔ! ಠࣗϑΥϯτ

     Why not DIY?
  41. Responsive Web Design Mobile Support / Retina Flat Design Trend

    2012 2011 2013 Font DIY
  42. ͱݴͬͯͨΒ ΄Μͱʹདྷͨ ˞೔ຊҎ֎ʜ

  43. Ͱ΋ɺϑΥϯτͳΜͯ Ͳ͏΍ͬͯ࡞Δͷ S

  44. ͦ͏ɻͦΕ͕ɺ ࠓ೔ͷςʔϚͰ͢ɻ u

  45. σϞαΠτ

  46. ΞΠίϯ͕ओମͷ αΠτྫΛ࣠ʹ

  47. ͜Μͳͷ ࡞ͬͯΈ·ͨ͠ɻ

  48. 1$ 5BCMFU 1IPOF

  49. ࠕࡦࡀ࡮ࡈ࡜ࡦࠢ࡮࡜ࠗࡉ࡜࡝࡯ ⺒߻ ୫ࠅࠆ ⾈߁ 㘩ߴࠆ Anne Frank Micro Library Project

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

    stacked eat read Font Awesome
  51. ޡղΛڪΕͣʹݴ͏ͳΒɺ ϑΥϯτ͸ɺ ը૾ܗࣜͷͻͱͭʹͳͬͨɻ

  52. GIF JPEG PNG SVG ϑΥϯτ ࣸਅ × ˕ ˚ ×

    × Πϥετ × ˚ ◦ ˕ × ϩΰ ˚ × ◦ ◦ ˕ ΞΠίϯ ˚ × ˚ ˚ ˕ ը૾PSϑΥϯτ
  53. ੍࡞ͷϑϩʔ

  54. ׬੒ਤͷσβΠϯ ը૾ͷ੾Γग़͠ งғؾͷσβΠϯ ཁૉͷΞΠίϯԽ ͱΓ͋͑ͣ഑ஔ Ϩεϙϯγϒௐ੔ ͖ͬͪΓ഑ஔ όϥϯεͷௐ੔ Α͋͘Δ8&#σβΠϯͷϑϩʔ ϑϥοτσβΠϯͷϑϩʔ

    PSσΟςʔϧͷσβΠϯ ؔ܎ੑͷσβΠϯ ৭ຯɾొ৔ཁૉɾ૷০ )5.-ͷߏ଄༏ઌ ແݶϧʔϓ
  55. งғؾͷσβΠϯ ཁૉͷΞΠίϯԽ ͱΓ͋͑ͣ഑ஔ Ϩεϙϯγϒௐ੔ ϑϥοτσβΠϯͷϑϩʔ ࠕࡦࡀ࡮ࡈ࡜ࡦࠢ࡮࡜ࠗࡉ࡜࡝࡯ ⺒߻ ୫ࠅࠆ ⾈߁ 㘩ߴࠆ

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

  57. "ίʔε #ίʔε $ίʔε 4LFUDI (SVOU "EPCF*MMVTUSBUPS (MZQIT.JOJ 'POU1SFQ OTF SVG

    SVG
  58. (MZQIT.JOJ=  'POU1SFQ= OTF TTF SVG EOT WOFF ग़ྗ ม׵

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

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

    ΠνΦγɺ׬શࣗಈԽΞΠίϯ੍࡞؀ڥ Cίʔε SVG CSS (SVOU=
  61. $ίʔε 4LFUDI (SVOU SVG "ίʔε (MZQIT.JOJ 'POU1SFQ OTF #ίʔε "EPCF*MMVTUSBUPS

    SVG
  62. *MMVTUSBUPSʹΑΔ ΞΠίϯϑΥϯτ੍࡞ Bίʔε

  63. Recipe w .BD8JOEPXT w "EPCF*MMVTUSBUPS w *DP.PPO 8FCΞϓϦ  w

    )5.-$44ͷجૅ஌ࣝ άϦου ϕδΣۂઢ
  64. w ςϯϓϨʔτΛμ΢ϯ ϩʔυ ·ͨ͸Ϋϩʔϯ Լ͝͠Β͑ Recipe http://bit.ly/SymbolFont

  65. ΞΠίϯ࡞੒⁞ Recipe JDPOTYBJU

  66. ΞΠίϯ࡞੒  Recipe ϑϥϯΫϑϧτΛඳ͘ ϚελʔυΛඳ͘ ܕൈ͖ ؆୯ͳΞΠίϯͷྫ ˞Ұ৭Ͱ࡞ਤ͢Δඞཁ͕͋Γ·͢ɻ

  67. ΞΠίϯ࡞੒⁠ Recipe 47(ܗࣜͰอଘ 47(ͷΦϓγϣϯ

  68. None
  69. *DP.PPO⁞ Recipe ΞΠίϯΛΠϯϙʔτ ϑΝΠϧબ୒

  70. *DP.PPO  Recipe άϦϑͷҰׅબ୒ ઃఆมߋɾμ΢ϯϩʔυ

  71. *DP.PPO⁠ Recipe ઃఆมߋ w *DP.PPOˠBOOFMJCSBSZ w JDPOˠBJ w $MBTT4FMFDUPSˠBJ *DP.PPOͷσϑΥϧτͷॻ͖ํ

    JDMBTTlJDPOFBUzJ 'POU"XFTPNFతͳॻ͖ํ JDMBTTlBJBJFBUzJ
  72. *DP.PPO⁡ Recipe μ΢ϯϩʔυ &05 &NCFEEFE0QFO5ZQF 55' 5SVF5ZQF'POU 47(ϑΥϯτ 80'' 8FC0QFO'POU'PSNBU

    $44
  73. 47(ग़ྗͯ͠ɺม׵ɻ ͜Ε͚ͩɻ Bίʔε

  74. γϯϘϧϑΥϯτ ͷ࢖͍ํ

  75. ϑΝΠϧ഑ஔ⁞ Recipe ϑΥϯτΛGPOUT΁ɻ$44͸BOOFMJCSBSZDTTʹϦωʔϜͯ͠DTT΁ɻ *DP.PPO͔Β μ΢ϯϩʔυͨ͠ϑΝΠϧ

  76. ϑΝΠϧ഑ஔ  Recipe ͜͜Ͱ͸ɺGPOUTˠGPOUTʹஔ׵ ؀ڥʹ߹Θͤͯ

  77. )5.-ͷฤू⁞ Recipe ΞΠίϯ௥Ճલͷ )5.-͸͜Μͳײ͡ɻ

  78. )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>
  79. None
  80. )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>
  81. <i class="ai ai-girl"></i> <i class="fa fa-twitter"></i> Jλά )5.-తʹ͸ɺηʔϑ ˞ؾʹͳΔਓ͸ɺTQBOλάͰ ΞΠίϯͰ͋Δ͜ͱΛࣔ͢

    ϞδϡʔϧੑΛ֬อ
  82. $44ͷΞΠσΞ⁞ Recipe ! .title > i { font-size: 800%; background:

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

    QY FN ਫฏઢ .title-hr > i { font-size: 600%; margin: -.5em 0; }
  84. ৭ͷมߋ Recipe ྫ͑͹੨ܥʹɻ ͜ΕΛɺ

  85. None
  86. ޙ͔Βͷௐ੔ʹɺ ϚδͰڧ͍ɻ r

  87. ࣗಈԽ

  88. None
  89. None
  90. None
  91. None
  92. ϝϯυΫαΠ͜ͱ͸ɺ ΋͏΍Βͳ͍ɻ

  93. ϝϯυΫαΠ͜ͱ ϑΥϯτʹม׵ɾ$44ੜ੒ˠ഑ஔˠύεͷॻ͖׵͑

  94. ϝϯυΫαΠ͜ͱ ຖճಉ͡λεΫ ʹ

  95. ຖճಉ͡λεΫ͸ ࣗಈ࣮ߦ͢Δ

  96. ϑΥϯτม׵ $44ͷੜ੒ ϒϥ΢βͷ࠶ಡΈࠐΈ ! -&44 4BTTม׵ $P⒎FF4DSJQUม׵ ͦͷ΄͔৭ʑ

  97. ͜Μͳײ͡ɻ HSVOUXFCGPOUΛ࢖༻ ˞ৄࡉলུ

  98. ʮඵͰͰ͖Δʯͱ ʮ෼͔͔Δʯ͸ શવҧ͏

  99. ೥ͷ॓୊ ϑϩϯτΤϯυͷ࡞ۀΛͲΕ͚ͩࣗಈԽ͢Δ͔

  100. None
  101. γϯϘϧϑΥϯτ ·ͱΊ

  102. ҙ֎ͱ࡞ΔͷΧϯλϯ

  103. ޙ͔Βͷௐ੔ʹ ϚδͰڧ͍

  104. બ୒ࢶ͍Ζ͍Ζ શ෦࡞Βͳͯ͘΋0,

  105. ࢖Θͳ͍ख͸ͳ͍ɻ ʲ݁࿦ʳ 

  106. 5IBOLZPV

  107. ຊΛॻ͖࢝Ί·ͨ͠ ˞(JU)VCʹݪߘެ։த

  108. ষߏ੒ ਐ௙

  109. https://github.com /cognitom/symbol-font-in-web/ ʮγϯϘϧϑΥϯτJO8FC Ծ ʯ  facebook.com/cognitom