Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
No more CSS Sprites! ͔ΜͨΜΞΠίϯϑΥϯτ࡞ज़ Տଜ (Tsutomu Kawamura) facebook.com/cognitom
Slide 2
Slide 2 text
Տଜ (Tsutomu Kawamura) facebook.com/cognitom ԼΦʔϓϯιʔε$BGF ϦϒϥΠζʙͯ͢ͷຊ୨Λਤॻؗʹʙ ίϫʔΩϯάڠಉ߹ $PHOJ5PN"DBEFNJD%FTJHO#PPL1SFTT ࣾ ΦʔϓϯϏδωειϑτ ΣΞڠձίϯΫϦʔτϑΝΠϒδϟύϯ ג $PEFS%PKP5PLZP
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
shimokita.kabe น͍ͭͩͬͯɺͷલʹ͋ͬͨɻ
Slide 5
Slide 5 text
shimokita.kabe นนͰ ͜͏͍͏ͭɻ
Slide 6
Slide 6 text
νʔϜϝϯόʔืूத
Slide 7
Slide 7 text
ͯ͞ɺ
Slide 8
Slide 8 text
ࠓ͢ͷɺίϨɻ
Slide 9
Slide 9 text
ΞΠίϯϑΥϯτ Symbol fonts?
Slide 10
Slide 10 text
ͨͱ͑ɺ ͜Εɻ
Slide 11
Slide 11 text
͜Εɺ
Slide 12
Slide 12 text
͜Ε ϑΥϯτɻ
Slide 13
Slide 13 text
Webdings Wingdings Arial ABCDEFGHI ੲ͔Β͓ͳ͡Έ
Slide 14
Slide 14 text
8ϑΥϯτͬͯ
Slide 15
Slide 15 text
͜Μͳͷ
Slide 16
Slide 16 text
͜Μͳͷ
Slide 17
Slide 17 text
͜Ε͚ͩɻ
Slide 18
Slide 18 text
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 ✔ ✔ ✔ ϒϥβ ରԠঢ়گ
Slide 19
Slide 19 text
icon fonts met web.
Slide 20
Slide 20 text
ίϨͰ͢ɻ
Slide 21
Slide 21 text
@font-face { font-family: 'Symbols'; src: url('Symbols.ttf') format('truetype'); }
good
ྫ ྫ ྫ
Slide 22
Slide 22 text
ͳΊΒ͔ɻ3FUJOB3FBEZ
Slide 23
Slide 23 text
$44Ͱ৭ίϯτϩʔϧ
Slide 24
Slide 24 text
Octicons Font Awesome
Slide 25
Slide 25 text
send him an iMac
Slide 26
Slide 26 text
http://symbolset.com http://icomoon.io http://kudakurage.com/ligature_symbols/
Slide 27
Slide 27 text
•G IF •ಁ ա PN G •CSSε ϓ ϥ Π τ •SVG ? •W eb ϑ Υ ϯ τ ! • PUA Λ ͏ • Ligature (߹ ࣈ ) • ???
Slide 28
Slide 28 text
Responsive Web Design Mobile Support / Retina Flat Design Trend 2012 2011 2013 Font DIY
Slide 29
Slide 29 text
FontAwesome ͳͲ ಠࣗΞΠίϯ͕ ͍͔ͭඞཁ FontAwesome + ಠࣗΞΠίϯPNG iconࢦఆʹ2ܥ౷ →Ή͖ʔ! ಠࣗϑΥϯτ Why not DIY?
Slide 30
Slide 30 text
͑ɺϑΥϯτͳΜͯ Ͳ͏ͬͯ࡞Δͷ
Slide 31
Slide 31 text
FontForge was great, but...
Slide 32
Slide 32 text
Glyphs mini ¥3,900
Slide 33
Slide 33 text
σβΠφ͕ຖͬͯɺ ൃڰ͠ͳ͍ɻ ར༻ऀஊ
Slide 34
Slide 34 text
OTF TTF WOFF EOT SVG Լॻ͖ ௐ ม ֬ೝ
Slide 35
Slide 35 text
ςϯϓϨʔτΛ (JU)VCͰެ։தɻ github.com/cognitom/symbols
Slide 36
Slide 36 text
σϞ
Slide 37
Slide 37 text
No content
Slide 38
Slide 38 text
·ͱΊ
Slide 39
Slide 39 text
ϑΥϯτΛ ࡞ΔͷҰ෦ ͷมͳਓ͚ͩ ࠓ·Ͱ શͯͷ8σ βΠφ͕ϑΥϯ τΛ࡞Δ࣌ ͜Ε͔Β
Slide 40
Slide 40 text
CSS Sprites? Icon Fonts! ?
Slide 41
Slide 41 text
5IBOLZPV