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
Building foundations 堅牢なデザイントークンの設計
hilokifigma
2
3.6k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
Bulletproof Design System with TypeScript
takanorip
6
3.7k
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3k
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
350
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
290
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
5
570
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.8k
タイミーでフィールドワークしたら、サービスデザインが始まった
kenichiota0711
1
2.2k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
310
株式会社バクタム 会社説明資料
bactum
0
260
harutaka Vision Deck
zenkigenforrecruit
0
160
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Designing for humans not robots
tammielis
253
25k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
RailsConf 2023
tenderlove
30
1.1k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Done Done
chrislema
184
16k
Producing Creativity
orderedlist
PRO
346
40k
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