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.4k
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
88
JTF2018
cognitom
5
1.2k
Riot: changing on v3 and its companion tools
cognitom
0
110
LLoT Night - Riot.js
cognitom
1
870
Felt - a simple web server with the power of the future
cognitom
0
290
Riot: all about v2 to v3
cognitom
7
3.7k
Create A Small Studio in A Cafe
cognitom
2
860
Riot.js in WPD-Week
cognitom
19
11k
Riot and Components
cognitom
4
570
Other Decks in Design
See All in Design
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
450
モデル・デザイン入門
akitsugu7935
0
470
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1k
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
2
170
Design Leadership in Challenging Times
morganepeng
3
300
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
180
Wishing Star Comic
torije
2
1.2k
Backlogのイロハ・ やさしい使い方(基本編)
wattlaa
0
320
Speaker DeckにおけるGoogleスライドのフォントの問題解決/problem solving for google slides 2023
moriyuya
31
2.6k
Product-Writing
aguringo
6
2.8k
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
689
190k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.9k
Code Review Best Practice
trishagee
55
15k
Fantastic passwords and where to find them - at NoRuKo
philnash
37
2.5k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Adopting Sorbet at Scale
ufuk
68
8.6k
We Have a Design System, Now What?
morganepeng
43
6.7k
Embracing the Ebb and Flow
colly
80
4.1k
The Invisible Customer
myddelton
114
12k
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