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

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 .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(ͷΦϓγϣϯ

68. None

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>
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 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 ྫ͑͹੨ܥʹɻ ͜ΕΛɺ

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. 5IBOL
     ZPV

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

108. ষߏ੒
     ਐ௙

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