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
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
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
490
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
730
デザイナーとPMの両ロール_3つのポイント
toy1618
1
340
Yumika Yamada Portfolio
yumii
0
770
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
760
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
#Dubois Challenge 2025: Economics
ajstarks
0
130
問いの変遷
iflection
0
170
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
300
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.8k
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
440
Featured
See All Featured
A better future with KSS
kneath
238
17k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
How to Ace a Technical Interview
jacobian
278
23k
The Cult of Friendly URLs
andyhume
79
6.5k
Code Reviewing Like a Champion
maltzj
524
40k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Bash Introduction
62gerente
613
210k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
How to Think Like a Performance Engineer
csswizardry
25
1.7k
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