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
Symbol Font in Web
Search
Tsutomu Kawamura
March 08, 2014
Design
29
3.6k
Symbol Font in Web
「シンボルフォントで広がるフラットデザインの可能性」
Tsutomu Kawamura
March 08, 2014
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
620
Other Decks in Design
See All in Design
Installing and Running decksh/pdfdeck
ajstarks
1
830
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
690
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
企画を動かすデザイナーの思考!「広げて絞る」アプローチ。
hikidakan
0
150
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
260
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
480
The Spectacular Lies of Maps
axbom
PRO
1
250
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
230
UX & Accessibilité cognitive : et si vous simplifiiez vraiment l’expérience utilisateur ?
marietournelle35
0
120
Findyのプロデチームの 歩みとこれから
satty9556
0
250
Crisp Code inc. ブランドガイドライン
so_kotani
1
200
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
300
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Facilitating Awesome Meetings
lara
55
6.5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Code Reviewing Like a Champion
maltzj
525
40k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
How GitHub (no longer) Works
holman
315
140k
Making Projects Easy
brettharned
117
6.3k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Automating Front-end Workflow
addyosmani
1370
200k
Transcript
γϯϘϧϑΥϯτ Ͱ͕ΔϑϥοτσβΠϯͷՄೳੑ Տଜ (Tsutomu Kawamura) facebook.com/cognitom
Introduction σϞαΠτ γϯϘϧϑΥϯτͷ࡞Γํ γϯϘϧϑΥϯτͷ͍ํ ࣗಈԽ http://bit.ly/SymbolFont ͋ͱͰ͏ͷͰɺ μϯϩʔυ͍ͯͩ͘͠͞ɻ
+ + ৭ʑ
Introduction
ࠓ͢ͷɺίϨɻ
γϯϘϧϑΥϯτ 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 ✔ 9 ✔ ✔
FireFox 3.5 ✔ 3.6 ✔ ✔ Safari 3.1 ✔ ✔ 5.1 ✔ ✔ ✔ Chrome 4 ✔ ✔ 6 ✔ ✔ ✔ iOS 4 ✔ 4.2 ✔ ✔ 5.1 ✔ ✔ ✔ Android 2.2 ✔ 3.1 ✔ ✔ current ✔ ✔ ✔ ϒϥβ ରԠঢ়گ
γϯϘϧϑΥϯτ 8&#ϑΥϯτ
ίϨͰ͢ɻ
@font-face { font-family: 'MyIcons'; src: url(‘MyIcons.ttf') format('truetype'); } <span class=”mi
mi-good”></span> <i class=”mi mi-good”></i> <i class=”mi”>good</i> ྫ ྫ ྫ
Կ͕ඒຯ͍͠ͷ u
ͳΊΒ͔ɻ3FUJOB3FBEZ
$44Ͱ৭ίϯτϩʔϧ
αʔόϦΫΤετݮ͍ WOFF
γϯϘϧϑΥϯτͳ 8&#αΠτ
Octicons
None
None
None
Segoe UI Symbol
γϯϘϧϑΥϯτ ͍Ζ͍Ζ
Font Awesome w ਓؾͰ͢ɻͲͷ͘Β͍ w (JU)VCͰ˒ສ w ࢀߟ·Ͱʜ w
#PPUTUSBQ˒ສ w K2VFSZ˒ສ
369 icons
open source!
http://symbolset.com http://icomoon.io http://kudakurage.com/ligature_symbols/
GLYPHICONS
None
None
•G IF •ಁ ա PN G •CSSε ϓ ϥ Π
τ •SVG ? •W eb ϑ Υ ϯ τ ! • PUA Λ ͏ • Ligature (߹ ࣈ ) • ଟ ৭ Γ ΄ ͔
FontAwesome ͳͲ ಠࣗΞΠίϯ͕ ͍͔ͭඞཁ FontAwesome + ಠࣗΞΠίϯPNG iconࢦఆʹ2ܥ౷ →Ή͖ʔ! ಠࣗϑΥϯτ
Why not DIY?
Responsive Web Design Mobile Support / Retina Flat Design Trend
2012 2011 2013 Font DIY
ͱݴͬͯͨΒ ΄Μͱʹདྷͨ ˞ຊҎ֎ʜ
ͰɺϑΥϯτͳΜͯ Ͳ͏ͬͯ࡞Δͷ S
ͦ͏ɻͦΕ͕ɺ ࠓͷςʔϚͰ͢ɻ u
σϞαΠτ
ΞΠίϯ͕ओମͷ αΠτྫΛ࣠ʹ
͜Μͳͷ ࡞ͬͯΈ·ͨ͠ɻ
1$ 5BCMFU 1IPOF
ࠕࡦࡀࡈࡦࠢࠗࡉ ⺒ ୫ࠅࠆ ⾈߁ 㘩ߴࠆ Anne Frank Micro Library Project
http://annelibrary.github.io/ ಡΈฦͯ͠Έͯ ߟ͑Α͏ ެཱਤॻؗʹ आΓʹ͍͜͏ ಡΜͰɺ༑ୡʹ ଃΖ͏ ϑϥϯΫϑϧτΛ ยखʹޠΓ߹͓͏ʂ ޟᣣ⸥ޠ ࠍ⟎ߊ ৻✜ߦ⟎߈ߚ ᧄࠍਗߴࠆ ͓ళʹɺΦϑΟεʹɻ ࣗͷຊ୨ʹɻ ϥΠϒϥϦʔͷ։͖ํ ΞΫγϣϯΛ͓͜͢ Nj Ȝ Ƕ Ƥ థ ֘ 451 ʮΞϯωɾϑϥϯΫɾϥΠϒϥϦʔʯɺ୭ͰࢀՃͰ͖ ΔϓϩδΣΫτͰ͢ɻ߹ݴ༿ ʮಡΉ͜ͱϥΠϒϥϦʔɺ आΓΔͷϥΠϒϥϦʔɺຊΛஔ͘ͷޠΓ߹͏ͷ ϥΠϒϥϦʔʯ ɻৄͪ͘͜͠Β·Ͱɻ ݩʹͨ͠ϙελʔ γϯϓϧɻϑϥοτɻ ςʔϚຖͷΞΠίϯ ͜ͷลɺ'POU"XFTPNF ਫฏઢΞΠίϯ ࣈ5ZQF4RVBSF Πϥετ എܠ
girl emblem borrow buy diary related books leaned pot grinder
stacked eat read Font Awesome
ޡղΛڪΕͣʹݴ͏ͳΒɺ ϑΥϯτɺ ը૾ܗࣜͷͻͱͭʹͳͬͨɻ
GIF JPEG PNG SVG ϑΥϯτ ࣸਅ × ˕ ˚ ×
× Πϥετ × ˚ ◦ ˕ × ϩΰ ˚ × ◦ ◦ ˕ ΞΠίϯ ˚ × ˚ ˚ ˕ ը૾PSϑΥϯτ
੍࡞ͷϑϩʔ
ਤͷσβΠϯ ը૾ͷΓग़͠ งғؾͷσβΠϯ ཁૉͷΞΠίϯԽ ͱΓ͋͑ͣஔ Ϩεϙϯγϒௐ ͖ͬͪΓஔ όϥϯεͷௐ Α͋͘Δ8&#σβΠϯͷϑϩʔ ϑϥοτσβΠϯͷϑϩʔ
PSσΟςʔϧͷσβΠϯ ؔੑͷσβΠϯ ৭ຯɾొཁૉɾ০ )5.-ͷߏ༏ઌ ແݶϧʔϓ
งғؾͷσβΠϯ ཁૉͷΞΠίϯԽ ͱΓ͋͑ͣஔ Ϩεϙϯγϒௐ ϑϥοτσβΠϯͷϑϩʔ ࠕࡦࡀࡈࡦࠢࠗࡉ ⺒ ୫ࠅࠆ ⾈߁ 㘩ߴࠆ
Anne Frank Micro Library Project http://annelibrary.github.io/ ಡΈฦͯ͠Έͯ ߟ͑Α͏ ެཱਤॻؗʹ आΓʹ͍͜͏ ಡΜͰɺ༑ୡʹ ଃΖ͏ ϑϥϯΫϑϧτΛ ยखʹޠΓ߹͓͏ʂ ޟᣣ⸥ޠ ࠍ⟎ߊ ৻✜ߦ⟎߈ߚ ᧄࠍਗߴࠆ ͓ళʹɺΦϑΟεʹɻ ࣗͷຊ୨ʹɻ ϥΠϒϥϦʔͷ։͖ํ ΞΫγϣϯΛ͓͜͢ Nj Ȝ Ƕ Ƥ థ ֘ 451 ʮΞϯωɾϑϥϯΫɾϥΠϒϥϦʔʯɺ୭ͰࢀՃͰ͖ ΔϓϩδΣΫτͰ͢ɻ߹ݴ༿ ʮಡΉ͜ͱϥΠϒϥϦʔɺ आΓΔͷϥΠϒϥϦʔɺຊΛஔ͘ͷޠΓ߹͏ͷ ϥΠϒϥϦʔʯ ɻৄͪ͘͜͠Β·Ͱɻ
γϯϘϧϑΥϯτ ͷ࡞Γํ
"ίʔε #ίʔε $ίʔε 4LFUDI (SVOU "EPCF*MMVTUSBUPS (MZQIT.JOJ 'POU1SFQ OTF SVG
SVG
(MZQIT.JOJ= 'POU1SFQ= OTF TTF SVG EOT WOFF ग़ྗ ม
8FCϑΥϯτ (6*ΞϓϦ͚ͩͰ݁ɻϑΥϯτ͖͚ Aίʔε
*MMVTUSBUPS= TTF SVG EOT WOFF ग़ྗ ม 8FCϑΥϯτ $44
͍׳Εͨ*MMVTUSBUPSͰ͡ΊΔɺϑΥϯτϥΠϑ Bίʔε SVG CSS *DP.PPO=ʙ
4LFUDI= TTF SVG EOT WOFF ग़ྗ ม 8FCϑΥϯτ $44
ΠνΦγɺશࣗಈԽΞΠίϯ੍࡞ڥ Cίʔε SVG CSS (SVOU=
$ίʔε 4LFUDI (SVOU SVG "ίʔε (MZQIT.JOJ 'POU1SFQ OTF #ίʔε "EPCF*MMVTUSBUPS
SVG
*MMVTUSBUPSʹΑΔ ΞΠίϯϑΥϯτ੍࡞ Bίʔε
Recipe w .BD8JOEPXT w "EPCF*MMVTUSBUPS w *DP.PPO 8FCΞϓϦ w
)5.-$44ͷجૅࣝ άϦου ϕδΣۂઢ
w ςϯϓϨʔτΛμϯ ϩʔυ ·ͨΫϩʔϯ Լ͝͠Β͑ Recipe http://bit.ly/SymbolFont
ΞΠίϯ࡞⁞ Recipe JDPOTYBJU
ΞΠίϯ࡞ Recipe ϑϥϯΫϑϧτΛඳ͘ ϚελʔυΛඳ͘ ܕൈ͖ ؆୯ͳΞΠίϯͷྫ ˞Ұ৭Ͱ࡞ਤ͢Δඞཁ͕͋Γ·͢ɻ
ΞΠίϯ࡞ Recipe 47(ܗࣜͰอଘ 47(ͷΦϓγϣϯ
None
*DP.PPO⁞ Recipe ΞΠίϯΛΠϯϙʔτ ϑΝΠϧબ
*DP.PPO Recipe άϦϑͷҰׅબ ઃఆมߋɾμϯϩʔυ
*DP.PPO Recipe ઃఆมߋ w *DP.PPOˠBOOFMJCSBSZ w JDPOˠBJ w $MBTT4FMFDUPSˠBJ *DP.PPOͷσϑΥϧτͷॻ͖ํ
JDMBTTlJDPOFBUzJ 'POU"XFTPNFతͳॻ͖ํ JDMBTTlBJBJFBUzJ
*DP.PPO Recipe μϯϩʔυ &05 &NCFEEFE0QFO5ZQF 55' 5SVF5ZQF'POU 47(ϑΥϯτ 80'' 8FC0QFO'POU'PSNBU
$44
47(ग़ྗͯ͠ɺมɻ ͜Ε͚ͩɻ Bίʔε
γϯϘϧϑΥϯτ ͷ͍ํ
ϑΝΠϧஔ⁞ Recipe ϑΥϯτΛGPOUTɻ$44BOOFMJCSBSZDTTʹϦωʔϜͯ͠DTTɻ *DP.PPO͔Β μϯϩʔυͨ͠ϑΝΠϧ
ϑΝΠϧஔ Recipe ͜͜ͰɺGPOUTˠGPOUTʹஔ ڥʹ߹Θͤͯ
)5.-ͷฤू⁞ Recipe ΞΠίϯՃલͷ )5.-͜Μͳײ͡ɻ
)5.-ͷฤू Recipe <link href="css/anne-library.css" rel="stylesheet"> <i class="ai ai-girl"></i> <i class="fa
fa-twitter"></i> ࢀߟ'POU"XFTPNF ্ ɺ(MZQIJDPO Լ <i class="glyphicon glyphicon-cloud"></i>
None
)5.-ͷฤू Recipe <i class="ai ai-girl"></i> <i class="fa fa-twitter"></i> <i class="fa
fa-facebook"></i> <i class="ai ai-read"></i> <i class="ai ai-borrow"></i> <i class="ai ai-buy"></i> <i class="ai ai-eat"></i>
<i class="ai ai-girl"></i> <i class="fa fa-twitter"></i> Jλά )5.-తʹɺηʔϑ ˞ؾʹͳΔਓɺTQBOλάͰ ΞΠίϯͰ͋Δ͜ͱΛࣔ͢
ϞδϡʔϧੑΛ֬อ
$44ͷΞΠσΞ⁞ Recipe ! .title > i { font-size: 800%; background:
#fff; border-radius: .5em; width: 1em; } QY SFN FN ؙғΈ
$44ͷΞΠσΞ Recipe .title-hr { border-top: 3px solid #423933; }
QY FN ਫฏઢ .title-hr > i { font-size: 600%; margin: -.5em 0; }
৭ͷมߋ Recipe ྫ͑੨ܥʹɻ ͜ΕΛɺ
None
ޙ͔Βͷௐʹɺ ϚδͰڧ͍ɻ r
ࣗಈԽ
None
None
None
None
ϝϯυΫαΠ͜ͱɺ ͏Βͳ͍ɻ
ϝϯυΫαΠ͜ͱ ϑΥϯτʹมɾ$44ੜˠஔˠύεͷॻ͖͑
ϝϯυΫαΠ͜ͱ ຖճಉ͡λεΫ ʹ
ຖճಉ͡λεΫ ࣗಈ࣮ߦ͢Δ
ϑΥϯτม $44ͷੜ ϒϥβͷ࠶ಡΈࠐΈ ! -&44 4BTTม $P⒎FF4DSJQUม ͦͷ΄͔৭ʑ
͜Μͳײ͡ɻ HSVOUXFCGPOUΛ༻ ˞ৄࡉলུ
ʮඵͰͰ͖Δʯͱ ʮ͔͔Δʯ શવҧ͏
ͷ॓ ϑϩϯτΤϯυͷ࡞ۀΛͲΕ͚ͩࣗಈԽ͢Δ͔
None
γϯϘϧϑΥϯτ ·ͱΊ
ҙ֎ͱ࡞ΔͷΧϯλϯ
ޙ͔Βͷௐʹ ϚδͰڧ͍
બࢶ͍Ζ͍Ζ શ෦࡞Βͳͯ͘0,
Θͳ͍खͳ͍ɻ ʲ݁ʳ
5IBOLZPV
ຊΛॻ͖࢝Ί·ͨ͠ ˞(JU)VCʹݪߘެ։த
ষߏ ਐ
https://github.com /cognitom/symbol-font-in-web/ ʮγϯϘϧϑΥϯτJO8FC Ծ ʯ facebook.com/cognitom