No more CSS Sprites! - Speaker Deck

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