Symbol Font in Web

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

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. ͳΊΒ͔ɻ3FUJOB
    3FBEZ
    
23. $44Ͱ৭ίϯτϩʔϧ
24. αʔόϦΫΤετݮ
    
    ଎͍ WOFF
25. γϯϘϧϑΥϯτͳ
    8&#αΠτ
26. Octicons
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
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 .BD
    
    8JOEPXT
    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(ͷΦϓγϣϯ
69. *DP.PPO
    ⁞ Recipe ΞΠίϯΛΠϯϙʔτ ϑΝΠϧબ୒
70. *DP.PPO
      Recipe άϦϑͷҰׅબ୒ ઃఆมߋɾμ΢ϯϩʔυ
71. *DP.PPO
    ⁠ Recipe ઃఆมߋ w *DP.PPO
    ˠ
    BOOFMJCSBSZ
    w JDPO
    ˠ
    BJ
    w $MBTT
    4FMFDUPS
    ˠ
    BJ *DP.PPOͷσϑΥϧτͷॻ͖ํ
    J
    DMBTTlJDPOFBUzJ
    'POU"XFTPNFతͳॻ͖ํ
    J
    DMBTTlBJ
    BJFBUzJ
72. *DP.PPO
    ⁡ Recipe μ΢ϯϩʔυ &05
    &NCFEEFE
    0QFO5ZQF 55'
    5SVF5ZQF
    'POU 47(ϑΥϯτ 80''
    8FC
    0QFO
    '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>
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 S
    
    FN FN ؙғΈ
83. $44ͷΞΠσΞ
      Recipe .title-hr { border-top: 3px solid #423933; } 
    
    QY FN ਫฏઢ .title-hr > i { font-size: 600%; margin: -.5em 0; }
84. ৭ͷมߋ Recipe ྫ͑͹੨ܥʹɻ ͜ΕΛɺ
86. ޙ͔Βͷௐ੔ʹɺ
    ϚδͰڧ͍ɻ r
87. ࣗಈԽ
92. ϝϯυΫαΠ͜ͱ͸ɺ
    ΋͏΍Βͳ͍ɻ
93. ϝϯυΫαΠ͜ͱ ϑΥϯτʹม׵ɾ$44ੜ੒
    ˠ
    ഑ஔ
    ˠ
    ύεͷॻ͖׵͑
94. ϝϯυΫαΠ͜ͱ ຖճಉ͡λεΫ ʹ
95. ຖճಉ͡λεΫ͸
    ࣗಈ࣮ߦ͢Δ
96. ϑΥϯτม׵
    $44ͷੜ੒
    ϒϥ΢βͷ࠶ಡΈࠐΈ
    ! -&44
    4BTT
    ม׵
    $P⒎FF4DSJQU
    ม׵
    ͦͷ΄͔৭ʑ
97. ͜Μͳײ͡ɻ
    HSVOUXFCGPOUΛ࢖༻
    ˞ৄࡉলུ
98. ʮඵͰͰ͖Δʯͱ
    ʮ෼͔͔Δʯ͸
    શવҧ͏
99. ೥ͷ॓୊
    ϑϩϯτΤϯυͷ࡞ۀΛͲΕ͚ͩࣗಈԽ͢Δ͔
101. γϯϘϧϑΥϯτ
     ·ͱΊ
102. ҙ֎ͱ࡞ΔͷΧϯλϯ
103. ޙ͔Βͷௐ੔ʹ
     ϚδͰڧ͍
104. બ୒ࢶ͍Ζ͍Ζ શ෦࡞Βͳͯ͘΋0,
105. ࢖Θͳ͍ख͸ͳ͍ɻ ʲ݁࿦ʳ 
106. 5IBOL
     ZPV
107. ຊΛॻ͖࢝Ί·ͨ͠ ˞(JU)VCʹݪߘެ։த
108. ষߏ੒
     ਐ௙
109. https://github.com /cognitom/symbol-font-in-web/ ʮγϯϘϧϑΥϯτ
     JO
     8FC
     Ծ ʯ  facebook.com/cognitom