Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
No more CSS Sprites!
Search
Tsutomu Kawamura
April 27, 2013
Design
2
910
No more CSS Sprites!
かんたんアイコンフォント作成術。そろそろ、WEBデザイナもフォントをDIYする時代です。
http://atnd.org/events/38389
Tsutomu Kawamura
April 27, 2013
Tweet
Share
More Decks by Tsutomu Kawamura
See All by Tsutomu Kawamura
Connect your library to the world
cognitom
0
120
JTF2018
cognitom
5
1.3k
Riot: changing on v3 and its companion tools
cognitom
0
130
LLoT Night - Riot.js
cognitom
1
990
Felt - a simple web server with the power of the future
cognitom
0
320
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
910
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
610
Other Decks in Design
See All in Design
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
320
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
130
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
680
Haley's adventure chase
ivettetwin
0
230
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
450
How to get a Tiger to Tulsa
mcduckyart
0
110
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
300
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.9k
線で考える画面構成
natsuume
1
880
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Visualization
eitanlees
146
16k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Designing for Performance
lara
610
69k
Site-Speed That Sticks
csswizardry
10
680
Unsuck your backbone
ammeep
671
58k
Navigating Team Friction
lara
187
15k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
680
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
Transcript
No more CSS Sprites! ͔ΜͨΜΞΠίϯϑΥϯτ࡞ज़ Տଜ (Tsutomu Kawamura)
facebook.com/cognitom
Տଜ (Tsutomu Kawamura) facebook.com/cognitom ԼΦʔϓϯιʔε$BGF ϦϒϥΠζʙͯ͢ͷຊ୨Λਤॻؗʹʙ ίϫʔΩϯάڠಉ߹
$PHOJ5PN"DBEFNJD%FTJHO#PPL1SFTT ࣾ ΦʔϓϯϏδωειϑτ ΣΞڠձίϯΫϦʔτϑΝΠϒδϟύϯ ג $PEFS%PKP5PLZP
None
shimokita.kabe น͍ͭͩͬͯɺͷલʹ͋ͬͨɻ
shimokita.kabe นนͰ ͜͏͍͏ͭɻ
νʔϜϝϯόʔืूத
ͯ͞ɺ
ࠓ͢ͷɺίϨɻ
ΞΠίϯϑΥϯτ Symbol fonts?
ͨͱ͑ɺ ͜Εɻ
͜Εɺ
͜Ε ϑΥϯτɻ
Webdings Wingdings Arial ABCDEFGHI ੲ͔Β͓ͳ͡Έ
8&#ϑΥϯτͬͯ
͜Μͳͷ
͜Μͳͷ
͜Ε͚ͩɻ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css? family=Tangerine" />
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 ✔ ✔ ✔ ϒϥβ ରԠঢ়گ
icon fonts met web.
ίϨͰ͢ɻ
@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> ྫ ྫ ྫ
ͳΊΒ͔ɻ3FUJOB3FBEZ
$44Ͱ৭ίϯτϩʔϧ
Octicons Font Awesome
send him an iMac
http://symbolset.com http://icomoon.io http://kudakurage.com/ligature_symbols/
•G IF •ಁ ա PN G •CSSε ϓ ϥ Π
τ •SVG ? •W eb ϑ Υ ϯ τ ! • PUA Λ ͏ • Ligature (߹ ࣈ ) • ???
Responsive Web Design Mobile Support / Retina Flat Design Trend
2012 2011 2013 Font DIY
FontAwesome ͳͲ ಠࣗΞΠίϯ͕ ͍͔ͭඞཁ FontAwesome + ಠࣗΞΠίϯPNG iconࢦఆʹ2ܥ౷ →Ή͖ʔ! ಠࣗϑΥϯτ
Why not DIY?
͑ɺϑΥϯτͳΜͯ Ͳ͏ͬͯ࡞Δͷ
FontForge was great, but...
Glyphs mini ¥3,900
σβΠφ͕ຖͬͯɺ ൃڰ͠ͳ͍ɻ ར༻ऀஊ
OTF TTF WOFF EOT SVG Լॻ͖ ௐ ม ֬ೝ
ςϯϓϨʔτΛ (JU)VCͰެ։தɻ github.com/cognitom/symbols
σϞ
None
·ͱΊ
ϑΥϯτΛ ࡞ΔͷҰ෦ ͷมͳਓ͚ͩ ࠓ·Ͱ શͯͷ8&#σ βΠφ͕ϑΥϯ τΛ࡞Δ࣌ ͜Ε͔Β
CSS Sprites? Icon Fonts! ?
5IBOLZPV