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
630
Other Decks in Design
See All in Design
sachi_y_portfolio
sachi337
0
520
#Dubois Challenge 2025: Economics
ajstarks
1
170
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
570
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
500
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
280
CursorでAI活用のナレッジベースを構築する
kanzaki
0
660
harutaka Vision Deck
zenkigenforrecruit
0
210
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
280
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2k
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
3.8k
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.3k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
What's in a price? How to price your products and services
michaelherold
246
12k
Building an army of robots
kneath
306
46k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Faster Mobile Websites
deanohume
309
31k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
111
20k
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