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. ͳΊΒ͔ɻ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