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.5k
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
110
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
120
LLoT Night - Riot.js
cognitom
1
950
Felt - a simple web server with the power of the future
cognitom
0
310
Riot: all about v2 to v3
cognitom
7
3.8k
Create A Small Studio in A Cafe
cognitom
2
900
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
590
Other Decks in Design
See All in Design
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.6k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 組織横断のデザインの 取り組みについて
sig
1
270
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
190
Rayout Pattern 01
one0
0
1.5k
NAHO SHIMONO_Portfolio2025
nahohphp
0
150
一人ひとりのポテンシャルを活かしたナレッジマネジメントとは?
atsushihomma
0
360
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
280
Les petites aventures de CSS, saison 2025
goetter
3
4k
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
570
ZKK_001.pdf
nicholaspegu
0
1.5k
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
240
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
240
Featured
See All Featured
A better future with KSS
kneath
238
17k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
410
A designer walks into a library…
pauljervisheath
205
24k
How GitHub (no longer) Works
holman
314
140k
Documentation Writing (for coders)
carmenintech
67
4.6k
Speed Design
sergeychernyshev
27
790
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
We Have a Design System, Now What?
morganepeng
51
7.4k
Thoughts on Productivity
jonyablonski
69
4.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
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