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
130
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
640
Other Decks in Design
See All in Design
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
370
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
520
Yumika Yamada Portfolio
yumii
0
2k
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
2.8k
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
900k
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
【MIXI MEETUP!ー TECH & DESIGN DAYー】【工数98%削減】Xでモンストを話題にせよ!生成AIの活用で日本トレンド6位を獲得した企画の設計&デザイン術
mixi_design
PRO
0
150
「自分の仕事はどこまで?」と問い続けたら。デザイナーの「視座」を考える
mukai_takeru
0
160
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
600
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
920
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Six Lessons from altMBA
skipperchong
29
4k
Typedesign – Prime Four
hannesfritz
42
2.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
The Pragmatic Product Professional
lauravandoore
36
7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
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