Tweet
Tweet

Slide 1

Slide 1 text

γϯϘϧϑΥϯτ Ͱ޿͕ΔϑϥοτσβΠϯͷՄೳੑ  Տଜ঑ (Tsutomu Kawamura)  facebook.com/cognitom

Slide 2

Slide 2 text

Introduction σϞαΠτ γϯϘϧϑΥϯτͷ࡞Γํ γϯϘϧϑΥϯτͷ࢖͍ํ ࣗಈԽ http://bit.ly/SymbolFont ͋ͱͰ࢖͏ͷͰɺ μ΢ϯϩʔυ͍ͯͩ͘͠͞ɻ

Slide 3

Slide 3 text

+ + ৭ʑ

Slide 4

Slide 4 text

Introduction

Slide 5

Slide 5 text

ࠓ೔࿩͢ͷ͸ɺίϨɻ

Slide 6

Slide 6 text

γϯϘϧϑΥϯτ Symbol fonts?

Slide 7

Slide 7 text

ͨͱ͑͹ɺ ͜Εɻ

Slide 8

Slide 8 text

 ͜Ε΋ɺ

Slide 9

Slide 9 text

͜Ε΋ ϑΥϯτɻ

Slide 10

Slide 10 text

Webdings !"#$%&' Wingdings !"#$%&' Arial ABCDEFGHI ੲ͔Β͓ͳ͡Έ

Slide 11

Slide 11 text

8ϑΥϯτͬͯ

Slide 12

Slide 12 text

͜Μͳͷ

Slide 13

Slide 13 text

͜Μͳͷ

Slide 14

Slide 14 text

͜Μͳͷ

Slide 15

Slide 15 text

͜Μͳͷ

Slide 16

Slide 16 text

͜Ε͚ͩɻ

Slide 17

Slide 17 text

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 ✔ ✔ ✔ ϒϥ΢β ରԠঢ়گ

Slide 18

Slide 18 text

γϯϘϧϑΥϯτ 8ϑΥϯτ

Slide 19

Slide 19 text

ίϨͰ͢ɻ

Slide 20

Slide 20 text

@font-face { font-family: 'MyIcons'; src: url(‘MyIcons.ttf') format('truetype'); } good ྫ ྫ ྫ

Slide 21

Slide 21 text

Կ͕ඒຯ͍͠ͷ u

Slide 22

Slide 22 text

ͳΊΒ͔ɻ3FUJOB3FBEZ

Slide 23

Slide 23 text

$44Ͱ৭ίϯτϩʔϧ

Slide 24

Slide 24 text

αʔόϦΫΤετݮ଎͍ WOFF

Slide 25

Slide 25 text

γϯϘϧϑΥϯτͳ 8αΠτ

Slide 26

Slide 26 text

Octicons

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Segoe UI Symbol

Slide 31

Slide 31 text

γϯϘϧϑΥϯτ ͍Ζ͍Ζ

Slide 32

Slide 32 text

Font Awesome w ਓؾͰ͢ɻͲͷ͘Β͍ w (JU)VCͰ˒ສ w ࢀߟ·Ͱʜ w #PPUTUSBQ˒ສ w K2VFSZ˒ສ

Slide 33

Slide 33 text

369 icons

Slide 34

Slide 34 text

open source!

Slide 35

Slide 35 text

http://symbolset.com http://icomoon.io http://kudakurage.com/ligature_symbols/

Slide 36

Slide 36 text

GLYPHICONS

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

•G IF •ಁ ա PN G •CSSε ϓ ϥ Π τ •SVG ? •W eb ϑ Υ ϯ τ ! • PUA Λ ࢖ ͏ • Ligature (߹ ࣈ ) • ଟ ৭ ࡮ Γ ΄ ͔

Slide 40

Slide 40 text

FontAwesome ͳͲ ಠࣗΞΠίϯ͕
 ͍͔ͭ͸ඞཁ FontAwesome + ಠࣗΞΠίϯPNG iconࢦఆʹ2ܥ౷ →Ή͖ʔ! ಠࣗϑΥϯτ  Why not DIY?

Slide 41

Slide 41 text

Responsive Web Design Mobile Support / Retina Flat Design Trend 2012 2011 2013 Font DIY

Slide 42

Slide 42 text

ͱݴͬͯͨΒ ΄Μͱʹདྷͨ ˞೔ຊҎ֎ʜ

Slide 43

Slide 43 text

Ͱ΋ɺϑΥϯτͳΜͯ Ͳ͏΍ͬͯ࡞Δͷ S

Slide 44

Slide 44 text

ͦ͏ɻͦΕ͕ɺ ࠓ೔ͷςʔϚͰ͢ɻ u

Slide 45

Slide 45 text

σϞαΠτ

Slide 46

Slide 46 text

ΞΠίϯ͕ओମͷ αΠτྫΛ࣠ʹ

Slide 47

Slide 47 text

͜Μͳͷ ࡞ͬͯΈ·ͨ͠ɻ

Slide 48

Slide 48 text

1$ 5BCMFU 1IPOF

Slide 49

Slide 49 text

ࠕࡦࡀ࡮ࡈ࡜ࡦࠢ࡮࡜ࠗࡉ࡜࡝࡯ ⺒߻ ୫ࠅࠆ ⾈߁ 㘩ߴࠆ Anne Frank Micro Library Project http://annelibrary.github.io/ ಡΈฦͯ͠Έͯ ߟ͑Α͏ ެཱਤॻؗʹ आΓʹ͍͜͏ ಡΜͰɺ༑ୡʹ ଃΖ͏ ϑϥϯΫϑϧτΛ ยखʹޠΓ߹͓͏ʂ ޟᣣ⸥ޠ ࠍ⟎ߊ ৻✜ߦ⟎߈ߚ޿ ᧄࠍਗߴࠆ ͓ళʹɺΦϑΟεʹɻ ࣗ୐ͷຊ୨ʹɻ ϥΠϒϥϦʔͷ։͖ํ ΞΫγϣϯΛ͓͜͢ Nj Ȝ Ƕ Ƥ థ ֘ 451 ʮΞϯωɾϑϥϯΫɾϥΠϒϥϦʔʯ͸ɺ୭Ͱ΋ࢀՃͰ͖ ΔϓϩδΣΫτͰ͢ɻ߹ݴ༿͸ ʮಡΉ͜ͱ΋ϥΠϒϥϦʔɺ आΓΔͷ΋ϥΠϒϥϦʔɺຊΛஔ͘ͷ΋ޠΓ߹͏ͷ΋ ϥΠϒϥϦʔʯ ɻৄ͘͠͸ͪ͜Β·Ͱɻ ݩʹͨ͠ϙελʔ γϯϓϧɻϑϥοτɻ ςʔϚຖͷΞΠίϯ ͜ͷล͸ɺ'POU"XFTPNF ਫฏઢ΋ΞΠίϯ ୊ࣈ͸5ZQF4RVBSF Πϥετ΋ എܠ΋

Slide 50

Slide 50 text

girl emblem borrow buy diary related books leaned pot grinder stacked eat read Font Awesome

Slide 51

Slide 51 text

ޡղΛڪΕͣʹݴ͏ͳΒɺ ϑΥϯτ͸ɺ ը૾ܗࣜͷͻͱͭʹͳͬͨɻ

Slide 52

Slide 52 text

GIF JPEG PNG SVG ϑΥϯτ ࣸਅ × ˕ ˚ × × Πϥετ × ˚ ○ ˕ × ϩΰ ˚ × ○ ○ ˕ ΞΠίϯ ˚ × ˚ ˚ ˕ ը૾PSϑΥϯτ

Slide 53

Slide 53 text

੍࡞ͷϑϩʔ

Slide 54

Slide 54 text

׬੒ਤͷσβΠϯ ը૾ͷ੾Γग़͠ งғؾͷσβΠϯ ཁૉͷΞΠίϯԽ ͱΓ͋͑ͣ഑ஔ Ϩεϙϯγϒௐ੔ ͖ͬͪΓ഑ஔ όϥϯεͷௐ੔ Α͋͘Δ8σβΠϯͷϑϩʔ ϑϥοτσβΠϯͷϑϩʔ PSσΟςʔϧͷσβΠϯ ؔ܎ੑͷσβΠϯ ৭ຯɾొ৔ཁૉɾ૷০ )5.-ͷߏ଄༏ઌ ແݶϧʔϓ

Slide 55

Slide 55 text

งғؾͷσβΠϯ ཁૉͷΞΠίϯԽ ͱΓ͋͑ͣ഑ஔ Ϩεϙϯγϒௐ੔ ϑϥοτσβΠϯͷϑϩʔ ࠕࡦࡀ࡮ࡈ࡜ࡦࠢ࡮࡜ࠗࡉ࡜࡝࡯ ⺒߻ ୫ࠅࠆ ⾈߁ 㘩ߴࠆ Anne Frank Micro Library Project http://annelibrary.github.io/ ಡΈฦͯ͠Έͯ ߟ͑Α͏ ެཱਤॻؗʹ आΓʹ͍͜͏ ಡΜͰɺ༑ୡʹ ଃΖ͏ ϑϥϯΫϑϧτΛ ยखʹޠΓ߹͓͏ʂ ޟᣣ⸥ޠ ࠍ⟎ߊ ৻✜ߦ⟎߈ߚ޿ ᧄࠍਗߴࠆ ͓ళʹɺΦϑΟεʹɻ ࣗ୐ͷຊ୨ʹɻ ϥΠϒϥϦʔͷ։͖ํ ΞΫγϣϯΛ͓͜͢ Nj Ȝ Ƕ Ƥ థ ֘ 451 ʮΞϯωɾϑϥϯΫɾϥΠϒϥϦʔʯ͸ɺ୭Ͱ΋ࢀՃͰ͖ ΔϓϩδΣΫτͰ͢ɻ߹ݴ༿͸ ʮಡΉ͜ͱ΋ϥΠϒϥϦʔɺ आΓΔͷ΋ϥΠϒϥϦʔɺຊΛஔ͘ͷ΋ޠΓ߹͏ͷ΋ ϥΠϒϥϦʔʯ ɻৄ͘͠͸ͪ͜Β·Ͱɻ

Slide 56

Slide 56 text

γϯϘϧϑΥϯτ ͷ࡞Γํ

Slide 57

Slide 57 text

"ίʔε #ίʔε $ίʔε 4LFUDI (SVOU "EPCF*MMVTUSBUPS (MZQIT.JOJ 'POU1SFQ OTF SVG SVG

Slide 58

Slide 58 text

(MZQIT.JOJ= 'POU1SFQ= OTF TTF SVG EOT WOFF ग़ྗ ม׵ 8FCϑΥϯτ (6*ΞϓϦ͚ͩͰ׬݁ɻϑΥϯτ޷͖޲͚ Aίʔε

Slide 59

Slide 59 text

*MMVTUSBUPS= TTF SVG EOT WOFF ग़ྗ ม׵ 8FCϑΥϯτ$44 ࢖͍׳Εͨ*MMVTUSBUPSͰ͸͡ΊΔɺϑΥϯτϥΠϑ Bίʔε SVG CSS *DP.PPO=ʙ

Slide 60

Slide 60 text

4LFUDI= TTF SVG EOT WOFF ग़ྗ ม׵ 8FCϑΥϯτ$44 ΠνΦγɺ׬શࣗಈԽΞΠίϯ੍࡞؀ڥ Cίʔε SVG CSS (SVOU=

Slide 61

Slide 61 text

$ίʔε 4LFUDI (SVOU SVG "ίʔε (MZQIT.JOJ 'POU1SFQ OTF #ίʔε "EPCF*MMVTUSBUPS SVG

Slide 62

Slide 62 text

*MMVTUSBUPSʹΑΔ ΞΠίϯϑΥϯτ੍࡞ Bίʔε

Slide 63

Slide 63 text

Recipe w .BD8JOEPXT w "EPCF*MMVTUSBUPS w *DP.PPO 8FCΞϓϦ w )5.-$44ͷجૅ஌ࣝ άϦου ϕδΣۂઢ

Slide 64

Slide 64 text

w ςϯϓϨʔτΛμ΢ϯ ϩʔυ ·ͨ͸Ϋϩʔϯ Լ͝͠Β͑ Recipe http://bit.ly/SymbolFont

Slide 65

Slide 65 text

ΞΠίϯ࡞੒⁞ Recipe JDPOTYBJU

Slide 66

Slide 66 text

ΞΠίϯ࡞੒  Recipe ϑϥϯΫϑϧτΛඳ͘ ϚελʔυΛඳ͘ ܕൈ͖ ؆୯ͳΞΠίϯͷྫ ˞Ұ৭Ͱ࡞ਤ͢Δඞཁ͕͋Γ·͢ɻ

Slide 67

Slide 67 text

ΞΠίϯ࡞੒⁠ Recipe 47(ܗࣜͰอଘ 47(ͷΦϓγϣϯ

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

*DP.PPO⁞ Recipe ΞΠίϯΛΠϯϙʔτ ϑΝΠϧબ୒

Slide 70

Slide 70 text

*DP.PPO  Recipe άϦϑͷҰׅબ୒ ઃఆมߋɾμ΢ϯϩʔυ

Slide 71

Slide 71 text

*DP.PPO⁠ Recipe ઃఆมߋ w *DP.PPOˠBOOFMJCSBSZ w JDPOˠBJ w $MBTT4FMFDUPSˠBJ *DP.PPOͷσϑΥϧτͷॻ͖ํ JDMBTTlJDPOFBUzJ 'POU"XFTPNFతͳॻ͖ํ JDMBTTlBJBJFBUzJ

Slide 72

Slide 72 text

*DP.PPO⁡ Recipe μ΢ϯϩʔυ &05 &NCFEEFE0QFO5ZQF 55' 5SVF5ZQF'POU 47(ϑΥϯτ 80'' 8FC0QFO'POU'PSNBU $44

Slide 73

Slide 73 text

47(ग़ྗͯ͠ɺม׵ɻ ͜Ε͚ͩɻ Bίʔε

Slide 74

Slide 74 text

γϯϘϧϑΥϯτ ͷ࢖͍ํ

Slide 75

Slide 75 text

ϑΝΠϧ഑ஔ⁞ Recipe ϑΥϯτΛGPOUT΁ɻ$44͸BOOFMJCSBSZDTTʹϦωʔϜͯ͠DTT΁ɻ *DP.PPO͔Β μ΢ϯϩʔυͨ͠ϑΝΠϧ

Slide 76

Slide 76 text

ϑΝΠϧ഑ஔ  Recipe ͜͜Ͱ͸ɺGPOUTˠGPOUTʹஔ׵ ؀ڥʹ߹Θͤͯ

Slide 77

Slide 77 text

)5.-ͷฤू⁞ Recipe ΞΠίϯ௥Ճલͷ )5.-͸͜Μͳײ͡ɻ

Slide 78

Slide 78 text

)5.-ͷฤू  Recipe ࢀߟ'POU"XFTPNF ্ ɺ(MZQIJDPO Լ

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

)5.-ͷฤू⁠ Recipe

Slide 81

Slide 81 text

Jλά )5.-తʹ͸ɺηʔϑ ˞ؾʹͳΔਓ͸ɺTQBOλάͰ ΞΠίϯͰ͋Δ͜ͱΛࣔ͢ ϞδϡʔϧੑΛ֬อ

Slide 82

Slide 82 text

$44ͷΞΠσΞ⁞ Recipe ! .title > i { font-size: 800%; background: #fff; border-radius: .5em; width: 1em; } QY SFN FN ؙғΈ

Slide 83

Slide 83 text

$44ͷΞΠσΞ  Recipe .title-hr { border-top: 3px solid #423933; } QY FN ਫฏઢ .title-hr > i { font-size: 600%; margin: -.5em 0; }

Slide 84

Slide 84 text

৭ͷมߋ Recipe ྫ͑͹੨ܥʹɻ ͜ΕΛɺ

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

ޙ͔Βͷௐ੔ʹɺ ϚδͰڧ͍ɻ r

Slide 87

Slide 87 text

ࣗಈԽ

Slide 88

Slide 88 text

No content

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

ϝϯυΫαΠ͜ͱ͸ɺ ΋͏΍Βͳ͍ɻ

Slide 93

Slide 93 text

ϝϯυΫαΠ͜ͱ ϑΥϯτʹม׵ɾ$44ੜ੒ˠ഑ஔˠύεͷॻ͖׵͑

Slide 94

Slide 94 text

ϝϯυΫαΠ͜ͱ ຖճಉ͡λεΫ ʹ

Slide 95

Slide 95 text

ຖճಉ͡λεΫ͸ ࣗಈ࣮ߦ͢Δ

Slide 96

Slide 96 text

ϑΥϯτม׵ $44ͷੜ੒ ϒϥ΢βͷ࠶ಡΈࠐΈ ! -&44 4BTTม׵ $P⒎FF4DSJQUม׵ ͦͷ΄͔৭ʑ

Slide 97

Slide 97 text

͜Μͳײ͡ɻ HSVOUXFCGPOUΛ࢖༻ ˞ৄࡉলུ

Slide 98

Slide 98 text

ʮඵͰͰ͖Δʯͱ ʮ෼͔͔Δʯ͸ શવҧ͏

Slide 99

Slide 99 text

೥ͷ॓୊ ϑϩϯτΤϯυͷ࡞ۀΛͲΕ͚ͩࣗಈԽ͢Δ͔

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

γϯϘϧϑΥϯτ ·ͱΊ

Slide 102

Slide 102 text

ҙ֎ͱ࡞ΔͷΧϯλϯ

Slide 103

Slide 103 text

ޙ͔Βͷௐ੔ʹ ϚδͰڧ͍

Slide 104

Slide 104 text

બ୒ࢶ͍Ζ͍Ζ શ෦࡞Βͳͯ͘΋0,

Slide 105

Slide 105 text

࢖Θͳ͍ख͸ͳ͍ɻ ʲ݁࿦ʳ 

Slide 106

Slide 106 text

5IBOLZPV

Slide 107

Slide 107 text

ຊΛॻ͖࢝Ί·ͨ͠ ˞(JU)VCʹݪߘެ։த

Slide 108

Slide 108 text

ষߏ੒ ਐ௙

Slide 109

Slide 109 text

https://github.com /cognitom/symbol-font-in-web/ ʮγϯϘϧϑΥϯτJO8FC Ծ ʯ  facebook.com/cognitom