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
1k
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
920
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
640
Other Decks in Design
See All in Design
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.7k
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
510
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
Findyのプロデチームの 歩みとこれから
satty9556
0
260
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
730
Bulletproof Design System with TypeScript
takanorip
7
4.1k
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
120
harutaka Vision Deck
zenkigenforrecruit
0
220
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.4k
sachi_y_portfolio
sachi337
0
530
7 Core Values of Round-L
wired888
0
1.7k
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Faster Mobile Websites
deanohume
309
31k
Code Review Best Practice
trishagee
71
19k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Optimizing for Happiness
mojombo
379
70k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
4 Signs Your Business is Dying
shpigford
184
22k
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