No more CSS Sprites!

かんたんアイコンフォント作成術。そろそろ、WEBデザイナもフォントをDIYする時代です。
http://atnd.org/events/38389

Transcript

1. No more CSS Sprites! ͔ΜͨΜΞΠίϯϑΥϯτ࡞੒ज़  Տଜ ঑ (Tsutomu Kawamura)  facebook.com/cognitom
2.  Տଜ ঑ (Tsutomu Kawamura)  facebook.com/cognitom 
   Լ๺୔Φʔϓϯιʔε$BGF 
   ϦϒϥΠζ
   ʙ͢΂ͯͷຊ୨Λਤॻؗʹʙ 
   ίϫʔΩϯάڠಉ૊߹ $PHOJ5PN
   "DBEFNJD
   %FTJHO
   
   #PPL1SFTT
   
   ࣾ
   ΦʔϓϯϏδωειϑτ ΢ΣΞڠձ
   
   ίϯΫϦʔτϑΝΠϒδϟύϯ
   ג
   
   $PEFS%PKP
   5PLZP
4. shimokita.kabe น͸͍ͭͩͬͯɺ໨ͷલʹ͋ͬͨɻ
5. shimokita.kabe น͸นͰ΋ ͜͏͍͏΍ͭɻ
6. νʔϜϝϯόʔืूத
   
7. ͯ͞ɺ
8. ࠓ೔࿩͢ͷ͸ɺίϨɻ
9. ΞΠίϯϑΥϯτ Symbol fonts?
10. ͨͱ͑͹ɺ ͜Εɻ
11.  ͜Ε΋ɺ
12. ͜Ε΋ ϑΥϯτɻ
13. Webdings  Wingdings  Arial ABCDEFGHI ੲ͔Β͓ͳ͡Έ
14. 8&#ϑΥϯτͬͯ
15. ͜Μͳͷ
16. ͜Μͳͷ
17. ͜Ε͚ͩɻ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css? family=Tangerine" />
18. TTF EOT WOFF SVG IE 4 ✔ IE 9 ✔ ✔ FireFox 3.5 ✔ FireFox 3.6 ✔ ✔ Safari 3.1 ✔ ✔ Safari 5.1 ✔ ✔ ✔ Chrome 4 ✔ ✔ Chrome 6 ✔ ✔ ✔ iOS 4.0 ✔ iOS 4.2 ✔ ✔ iOS 5.1 ✔ ✔ ✔ Android 2.2 ✔ Android 3.1 ✔ ✔ Android current ✔ ✔ ✔ ϒϥ΢β ରԠঢ়گ
19. icon fonts met web.
20. ίϨͰ͢ɻ
21.  @font-face { font-family: 'Symbols'; src: url('Symbols.ttf') format('truetype'); } <span class=”symbol-good”></span> <span class=”symbol”>good</span> <i class=”symbol-good”></i> ྫ ྫ ྫ
22. ͳΊΒ͔ɻ3FUJOB
    3FBEZ
    
23. $44Ͱ৭ίϯτϩʔϧ
24. Octicons Font Awesome
25. send him an iMac
26. http://symbolset.com http://icomoon.io http://kudakurage.com/ligature_symbols/
27. •G IF •ಁ ա PN G •CSSε ϓ ϥ Π τ •SVG ? •W eb ϑ Υ ϯ τ ! • PUA Λ ࢖ ͏ • Ligature (߹ ࣈ ) • ???
28. Responsive Web Design Mobile Support / Retina Flat Design Trend 2012 2011 2013 Font DIY
29. FontAwesome ͳͲ ಠࣗΞΠίϯ͕ ͍͔ͭ͸ඞཁ FontAwesome + ಠࣗΞΠίϯPNG iconࢦఆʹ2ܥ౷ →Ή͖ʔ! ಠࣗϑΥϯτ  Why not DIY?
30. ͑ɺϑΥϯτͳΜͯ Ͳ͏΍ͬͯ࡞Δͷ
31. FontForge was great, but...
32. Glyphs mini ¥3,900
33. σβΠφ͕ຖ೔࢖ͬͯ΋ɺ ൃڰ͠ͳ͍ɻ ར༻ऀஊ
34. OTF TTF WOFF EOT SVG Լॻ͖ ௐ੔ ม׵ ֬ೝ
35. ςϯϓϨʔτΛ (JU)VCͰެ։தɻ github.com/cognitom/symbols
36. σϞ
38. ·ͱΊ
39. ϑΥϯτΛ ࡞Δͷ͸Ұ෦ ͷมͳਓ͚ͩ ࠓ·Ͱ શͯͷ8&#σ βΠφ͕ϑΥϯ τΛ࡞Δ࣌୅ ͜Ε͔Β
40. CSS Sprites? Icon Fonts! ?
41. 5IBOL
    ZPV