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