Web Fonts with Web Design

Slide 1

Slide 1 text

Takuji Ikeda Web Fonts with Web Design ޿͕Δ“೔ຊޠ Web Fonts”ͷੈք WebσβΠϯʹ“ϑΥϯτ”ΛऔΓೖΕΔͱ͸ʁ ʙ ϞϦαϫ ʮType Squareʯ λΠΞοϓηϛφʔ ʙ 2012/4/12 THU @ύιφςοΫ 12೥4݄16೔݄༵೔

Slide 2

Slide 2 text

ࣗݾ঺հ •஑ా୓࢘ Takuji Ikeda •ΫοΫύουגࣜձࣾɹσβΠφʔ •http://tikeda.net/ɹ •http://d.hatena.ne.jp/tikeda/ ɹ •Twitter: @tikedaɹ •ஶॻʰHTML5ςΫχΧϧϨϏϡʔ ʢϦοΫςϨίϜʣ ʱ 12೥4݄16೔݄༵೔

Slide 3

Slide 3 text

Twitter Hash Tag #typesquare TwitterͰੋඇͭͿ΍͍͓͍͍ͯͯͩ͘͞ɻ ࠷ޙͷσϞͰօ͞ΜͷͭͿ΍͖Λ࢖͍·͢ɻ 12೥4݄16೔݄༵೔

Slide 4

Slide 4 text

AGENDA 1. Web Fonts ͜ͱ͸͡Ί 2. ࢖ͬͯΈΑ͏ Web Fonts 3. ʮ࢖͑Δٕज़ʯʹ͢ΔҝͷڧΈͱऑΈ 4. ࣮ફʮTypeSquareʯ 5. Web Fontsʹ࢖ΘΕͳ͍ҝͷ৺ಘ 12೥4݄16೔݄༵೔

Slide 5

Slide 5 text

1 Web Fonts ͜ͱ͸͡Ί 12೥4݄16೔݄༵೔

Slide 6

Slide 6 text

Web Fonts ద༻લ http://demo.tikeda.net/webfont/demo1.html ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

Slide 7

Slide 7 text

Web Fonts ద༻ޙ http://demo.tikeda.net/webfont/demo1.html ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

Slide 8

Slide 8 text

Web Fonts ద༻ޙ Jun 501 Jun 201 Fredoka One http://demo.tikeda.net/webfont/demo1.html ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

Slide 9

Slide 9 text

͜Ε·Ͱ 8FC1BHF )5.- $44 *NBHF %FWJDF #SPXFS 'POU 12೥4݄16೔݄༵೔

Slide 10

Slide 10 text

Web Fontsͷొ৔ 8FC1BHF )5.- $44 *NBHF %FWJDF #SPXFS 'POU 12೥4݄16೔݄༵೔

Slide 11

Slide 11 text

Web FontsΛར༻͢ΔࣄͰɺ WebͷςΩετΛݟΔଆͷ؀ڥ ʹؔΘΒͣҙਤͨ͠ϑΥϯτͰ Web PageΛݟͤΔࣄ͕Ͱ͖Δ 12೥4݄16೔݄༵೔

Slide 12

Slide 12 text

ࣄྫ঺հ ւ֎ͷࣄྫ / αʔϏεͷࣄྫ / ࠃ಺ͷࣄྫ / ৽ͨͳࢼΈ 12೥4݄16೔݄༵೔

Slide 13

Slide 13 text

http://nikebetterworld.com/ Nike Better World ࣄྫ঺հʢԤถαΠτʣ 12೥4݄16೔݄༵೔

Slide 14

Slide 14 text

http://nikebetterworld.com/ Nike Better World ࣄྫ঺հʢԤถαΠτʣ Din Display Pro Thin NikeGratton 12೥4݄16೔݄༵೔

Slide 15

Slide 15 text

http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫ঺հʢԤถαΠτʣ 12೥4݄16೔݄༵೔

Slide 16

Slide 16 text

http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫ঺հʢԤถαΠτʣ bello-caps oxtail omnes-pro 12೥4݄16೔݄༵೔

Slide 17

Slide 17 text

http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/ Fit Fext ࣄྫ঺հʢԤถαΠτʣ 12೥4݄16೔݄༵೔

Slide 18

Slide 18 text

http://www.danhigbie.com/2011/02/05/being-better-in-3-easy-steps-design-edition/ Fit Fext ࣄྫ঺հʢԤถαΠτʣ corner-store-1 bello-caps-1 12೥4݄16೔݄༵೔

Slide 19

Slide 19 text

http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫ঺հ 12೥4݄16೔݄༵೔

Slide 20

Slide 20 text

http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫ঺հ Frutiger LT W01 65 Bold EgyptianSlateW01-Medium 12೥4݄16೔݄༵೔

Slide 21

Slide 21 text

http://ﬂavors.me/ Flavors.me ࣄྫ঺հʢServiceʣ 12೥4݄16೔݄༵೔

Slide 22

Slide 22 text

http://ﬂavors.me/ Flavors.me ࣄྫ঺հʢServiceʣ Richard Miller rnd book 12೥4݄16೔݄༵೔

Slide 23

Slide 23 text

http://typesquare.com/ TypeSquare ࣄྫ঺հʢ೔ຊʣ 12೥4݄16೔݄༵೔

Slide 24

Slide 24 text

http://typesquare.com/ TypeSquare ࣄྫ঺հʢ೔ຊʣ ৽ΰ M UD ৽ΰ M 12೥4݄16೔݄༵೔

Slide 25

Slide 25 text

http://pr.fontplus.jp/ Web Designing ΢ΣϒϑΥϯτσβΠϯΞϫʔυ2011 ࣄྫ঺հʢ೔ຊʣ 12೥4݄16೔݄༵೔

Slide 26

Slide 26 text

http://pr.fontplus.jp/ Web Designing ΢ΣϒϑΥϯτσβΠϯΞϫʔυ2011 ࣄྫ঺հʢ೔ຊʣ FOT-ஜࢵΦʔϧυ໌ே Pro R FOT-ஜࢵ໌ே Pro B 12೥4݄16೔݄༵೔

Slide 27

Slide 27 text

http://www.otsuka.co.jp/ohn/ ΦϩφΠϯެࣜαΠτ ࣄྫ঺հʢ೔ຊʣ 12೥4݄16೔݄༵೔

Slide 28

Slide 28 text

http://www.otsuka.co.jp/ohn/ ΦϩφΠϯެࣜαΠτ ࣄྫ঺հʢ೔ຊʣ deco-BokutohRuika02 12೥4݄16೔݄༵೔

Slide 29

Slide 29 text

http://pictos.cc/font/ PICTOS ৽͍͠Web Fontsͷ࢖ΘΕํ 12೥4݄16೔݄༵೔

Slide 30

Slide 30 text

CSSʹΑΔ࣮૷ํ๏ CSS Fonts Module Level 3 http://www.w3.org/TR/css3-fonts/ 12೥4݄16೔݄༵೔

Slide 31

Slide 31 text

CSSʹΑΔ࣮૷ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.woff”) format(“woff”); } h1 { font-family: “FontName”, sans-serif; } 12೥4݄16೔݄༵೔

Slide 32

Slide 32 text

CSSʹΑΔ࣮૷ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.eot?#ieﬁx”) format(“eot”), url(“FontName.woff”) format(“woff”), url(“FontName.truetype”) format(“truetype”), url(“FontName.svg”) format(“svg”); } ※ http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax 12೥4݄16೔݄༵೔

Slide 33

Slide 33 text

ϑΥϯτܗࣜ •.eot (Embedded Open Type) Internet Explorer 8ҎԼʹରԠ͢Δಠࣗܗࣜ •.woffʢWeb Open Font Formatʣ ࠷৽ϒϥ΢β͕ରԠΛ࢝Ίͨ΢Σϒઐ༻ܗࣜ •.ttfʢTrue Typeʣ ύιίϯͰೃછΈ͋ΔੜͷϑΥϯτܗࣜ •.svg WebͷϕΫλʔσʔλܗࣜΛϑΥϯτʹԠ༻ 12೥4݄16೔݄༵೔

Slide 34

Slide 34 text

Web Fontsͷ৘ใݯ ࠃ಺֎ͷ࠷৽ࣄྫɺCSS࣮૷ঢ়گͳͲ৘ใΛಘΔखஈ 12೥4݄16೔݄༵೔

Slide 35

Slide 35 text

http://blog.petitboys.com ϑΥϯτϒϩά Web Fontsͷ৘ใݯ 12೥4݄16೔݄༵೔

Slide 36

Slide 36 text

http://blog.typekit.com/ The Typekit Blog Web Fontsͷ৘ใݯ 12೥4݄16೔݄༵೔

Slide 37

Slide 37 text

http://blog.fonts.com/ fonts.com blog Web Fontsͷ৘ใݯ 12೥4݄16೔݄༵೔

Slide 38

Slide 38 text

࢖ͬͯΈΑ͏Web Fonts 2 12೥4݄16೔݄༵೔

Slide 39

Slide 39 text

Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β࢖͏ •࢖͍͍ͨϑΥϯτΛ·ͣ͸୳͢ͱ͜Ζ͔Β 12೥4݄16೔݄༵೔

Slide 40

Slide 40 text

Web FontsαʔϏεΛར༻͢Δ 12೥4݄16೔݄༵೔

Slide 41

Slide 41 text

http://typesquare.com/ TypeSquare ࠃ಺ 12೥4݄16೔݄༵೔

Slide 42

Slide 42 text

http://webfont.fontplus.jp/ ϑΥϯτϓϥε ࠃ಺ 12೥4݄16೔݄༵೔

Slide 43

Slide 43 text

http://decomoji.jp/ σί΋͡ ࠃ಺ 12೥4݄16೔݄༵೔

Slide 44

Slide 44 text

http://amanaimages.com/font/web/index.aspx amana images ࠃ಺ 12೥4݄16೔݄༵೔

Slide 45

Slide 45 text

http://typekit.com/ typekit ւ֎ʢԤจϑΥϯτʣ 12೥4݄16೔݄༵೔

Slide 46

Slide 46 text

http://www.google.com/webfonts Google web fonts ւ֎ʢԤจϑΥϯτʣ 12೥4݄16೔݄༵೔

Slide 47

Slide 47 text

TypeSquare ར༻ͷྲྀΕ http://typesquare.com/ 12೥4݄16೔݄༵೔

Slide 48

Slide 48 text

STEP1: Ϣʔβʔొ࿥ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

Slide 49

Slide 49 text

STEP2: ίʔεͷબ୒ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

Slide 50

Slide 50 text

STEP3: ৘ใͷೖྗ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

Slide 51

Slide 51 text

STEP4: ϩάΠϯ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

Slide 52

Slide 52 text

STEP5: ར༻αΠτͷొ࿥ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

Slide 53

Slide 53 text

STEP6: JavascriptͷுΓ෇͚ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

Slide 54

Slide 54 text

STEP7: ར༻ϑΥϯτͷબఆ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

Slide 55

Slide 55 text

STEP8: PV਺Ϩϙʔτ TypeSquare ར༻σϞ 12೥4݄16೔݄༵೔

Slide 56

Slide 56 text

ϑΥϯτΛߪೖͯࣗ͠લαʔόʔͰ࢖͏ 12೥4݄16೔݄༵೔

Slide 57

Slide 57 text

http://www.myfonts.com/ My Fonts Web Fontsʹ࢖͑ΔϑΥϯτΛߪೖ 12೥4݄16೔݄༵೔

Slide 58

Slide 58 text

http://www.fontshop.com/fontlist/n/web_fontfonts/ Font Shop Web Fontsʹ࢖͑ΔϑΥϯτΛߪೖ 12೥4݄16೔݄༵೔

Slide 59

Slide 59 text

http://webfonts.fonts.com/en-US Fonts.com Web Fontsʹ࢖͑ΔϑΥϯτΛߪೖ 12೥4݄16೔݄༵೔

Slide 60

Slide 60 text

My FontsͰϑΥϯ τߪೖ http://www.myfonts.com/ 12೥4݄16೔݄༵೔

Slide 61

Slide 61 text

MyFonts τοϓ MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

Slide 62

Slide 62 text

ر๬ͷϑΥϯτΛߪೖ MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

Slide 63

Slide 63 text

μ΢ϯϩʔυ MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

Slide 64

Slide 64 text

μ΢ϯϩʔυϑΝΠϧ MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

Slide 65

Slide 65 text

HOW TO ? MyFontsͰϑΥϯτߪೖ 12೥4݄16೔݄༵೔

Slide 66

Slide 66 text

࢖͍͍ͨϑΥϯτΛ·ͣ୳͢ 12೥4݄16೔݄༵೔

Slide 67

Slide 67 text

http://typesquare.com/simulator/ Ϋϥ΢υϑΥϯτ ɾ γϛϡϨʔλ ৭ʑͳύλʔϯΛࢼͯ͠ΈΔ 12೥4݄16೔݄༵೔

Slide 68

Slide 68 text

http://www.myfonts.com/WhatTheFont/ WhatTheFont ը૾͔ΒϑΥϯτΛೝࣝ 12೥4݄16೔݄༵೔

Slide 69

Slide 69 text

http://itunes.apple.com/jp/app/whatthefont/id304304134 WhatTheFont for iOS ը૾͔ΒϑΥϯτΛೝࣝ 12೥4݄16೔݄༵೔

Slide 70

Slide 70 text

http://fount.artequalswork.com/ Fount ΢ Σ ϒ͔ΒϑΥ ϯτΛ୳͢ʢBookmarkletʣ 12೥4݄16೔݄༵೔

Slide 71

Slide 71 text

http://chengyinliu.com/whatfont.html WHAT FONT TOOL ΢ Σ ϒ͔ΒϑΥ ϯτΛ୳͢ʢBookmarkletʣ 12೥4݄16೔݄༵೔

Slide 72

Slide 72 text

http://www.freefontconverter.com/ FreeFontConverter ख࣋ͪͷϑΥϯτΛม׵ 12೥4݄16೔݄༵೔

Slide 73

Slide 73 text

http://musashi.or.tv/woffconv.htm WOFFίϯόʔλ ख࣋ͪͷϑΥϯτΛม׵ 12೥4݄16೔݄༵೔

Slide 74

Slide 74 text

http://musashi.or.tv/woffconv.htm WOFFίϯόʔλ ख࣋ͪͷϑΥϯτΛม׵ ϥΠηϯεʹ͸ཁ஫ҙ 12೥4݄16೔݄༵೔

Slide 75

Slide 75 text

Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ ͙͢ʹ࢝ΊΒΕΔɻ Ͱ΋ແྉͩͱ੍ݶ͕͋Δ΋ͷ ͕ଟ͍ɻʮTypeSquareʯ͸ແྉఏڙத •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β࢖͏ Ұ൪Φʔι υ ο Ϋ εͰඞཁͳεΩϧͷशಘ͕Ͱ͖Δɻ •࢖͍͍ͨϑΥϯτΛ·ͣ͸୳͢ͱ͜Ζ͔Β ࠓ͙͢Ͱ͸ͳͯ͘΋ɺ ײ౓͸͓͚͋͛ͯΔखஈ 12೥4݄16೔݄༵೔

Slide 76

Slide 76 text

ʮ࢖͑Δٕज़ʯ ʹ͢ΔҝͷڧΈͱऑΈ 3 12೥4݄16೔݄༵೔

Slide 77

Slide 77 text

ڧΈ 12೥4݄16೔݄༵೔

Slide 78

Slide 78 text

΢ΣϒαʔϏεͳͲͷ ಈతίϯςϯπͷσβΠϯ 12೥4݄16೔݄༵೔

Slide 79

Slide 79 text

جຊతͳσβΠϯͷखॱ ίϯςϯπ 12೥4݄16೔݄༵೔

Slide 80

Slide 80 text

σβΠϯ جຊతͳσβΠϯͷखॱ ίϯςϯπ 12೥4݄16೔݄༵೔

Slide 81

Slide 81 text

σβΠϯ ίϯςϯπ ίϯςϯπ͋Γ͖Ͱ σβΠϯΛߟ͑8FC 1BHFͷ࡞੒Λߦ͏ جຊతͳσβΠϯͷखॱ 12೥4݄16೔݄༵೔

Slide 82

Slide 82 text

σβΠϯ ΢ΣϒαʔϏεσβΠϯͷखॱ 12೥4݄16೔݄༵೔

Slide 83

Slide 83 text

σβΠϯ ΢ΣϒαʔϏεσβΠϯͷखॱ ίϯςϯπ 12೥4݄16೔݄༵೔

Slide 84

Slide 84 text

σβΠϯ ΢ΣϒαʔϏεσβΠϯͷखॱ ίϯςϯπ ݩ͋ΔσβΠϯΛબΜ ͰίϯςϯπΛϢʔ βʔ͕ྲྀ͠ࠐΉҝޙ͔ Β࠷దͳσβΠϯΛࢪ ͤͳ͍ 12೥4݄16೔݄༵೔

Slide 85

Slide 85 text

http://d.hatena.ne.jp/tikeda/ tikeda::Diary What’s Web Font 12೥4݄16೔݄༵೔

Slide 86

Slide 86 text

What’s Web Font tikeda::Diary http://d.hatena.ne.jp/tikeda/ 12೥4݄16೔݄༵೔

Slide 87

Slide 87 text

What’s Web Font tikeda::Diary http://d.hatena.ne.jp/tikeda/ Cabin Sketch 12೥4݄16೔݄༵೔

Slide 88

Slide 88 text

What’s Web Font 12೥4݄16೔݄༵೔

Slide 89

Slide 89 text

ϕΫλʔσʔλΛੜ͔ͨ͠σβΠϯ 12೥4݄16೔݄༵೔

Slide 90

Slide 90 text

Responsive Design http://demo.tikeda.net/webfont/demo1.html ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

Slide 91

Slide 91 text

CSS3 Design ※ http://blog.typekit.com/2012/03/08/parkinson-type-design-joins-typekit/ 12೥4݄16೔݄༵೔

Slide 92

Slide 92 text

౷Ұੑͱ֦ுੑΛ݉ͶͨσβΠϯ 12೥4݄16೔݄༵೔

Slide 93

Slide 93 text

౷Ұੑͱ֦ுੑΛ݉ͶͦΖ͑ͨσβΠϯ No Image Design ϖʔδͷ֦ு http://demo.tikeda.net/webfont/demo2.html 12೥4݄16೔݄༵೔

Slide 94

Slide 94 text

ऑΈ 12೥4݄16೔݄༵೔

Slide 95

Slide 95 text

ϑΥϯτදࣔͷλΠϜϥά 12೥4݄16೔݄༵೔

Slide 96

Slide 96 text

ϑΥϯτදࣔͷλΠϜϥά •Web FontsΛࢦఆͨ͠ςΩετ͕Ұॠന͘ݟ͑ͳ ͍ঢ়ଶʹͳΔ͜ͱ͕͋Δ •Web Fontsʢ࿨จʣΛࢦఆͨ͠ςΩετ͕࠷ॳͰ όΠεϑΥϯτ͕දࣔ͞Ε͠͹Βͯ͘͠Web Fonts͕దԠ͞ΕΔ 12೥4݄16೔݄༵೔

Slide 97

Slide 97 text

σϞʹΑΔݕূ •σόΠεϑΥϯτ •શମʹԤจWeb Fontsͷࢦఆ •શମʹ࿨จWeb Fontsͷࢦఆ •෦෼తʹ࿨จͱԤจͷWeb Fontsͷࢦఆ •࿨จϑΥϯτͷදࣔʹϑΣʔυΛదԠ http://demo.tikeda.net/webfont/demo3.html 12೥4݄16೔݄༵೔

Slide 98

Slide 98 text

ςΩετͷϨϯμϦϯά 12೥4݄16೔݄༵೔

Slide 99

Slide 99 text

•Windows Chrome, FirefoxͰάϦϑ͕Ԛ͍ •αΠζ͕໿18pxҎԼͩͱϥΠϯ͕௵Εͯݟ͑Δ΋ ͷ͕͋Δ ςΩετͷϨϯμϦϯά 12೥4݄16೔݄༵೔

Slide 100

Slide 100 text

http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά 12೥4݄16೔݄༵೔

Slide 101

Slide 101 text

http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά 12೥4݄16೔݄༵೔

Slide 102

Slide 102 text

http://demo.tikeda.net/webfont/demo4.html άϦϑͷϨϯμϦϯά Windows Google ChromeͰͷϨϯμϦϯά -webkit-text-stroke: 0.5px #000 12೥4݄16೔݄༵೔

Slide 103

Slide 103 text

࣮ફʮTypeSquareʯ 4 12೥4݄16೔݄༵೔

Slide 104

Slide 104 text

Twitter λΠϜϥΠϯΛ࢖ͬͨσϞ http://demo.tikeda.net/webfont/ 12೥4݄16೔݄༵೔

Slide 105

Slide 105 text

λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱ΢ΣΠτ͕̑ஈ֊ʹมԽ 12೥4݄16೔݄༵೔

Slide 106

Slide 106 text

λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱ΢ΣΠτ͕̑ஈ֊ʹมԽ 26 px 32 px 54 px 110 px 18 px 12೥4݄16೔݄༵೔

Slide 107

Slide 107 text

λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ಺༰͔Β4छྨʹ৭ͱfont-family͕มԽ 12೥4݄16೔݄༵೔

Slide 108

Slide 108 text

λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ಺༰͔Β4छྨʹ৭ͱfont-family͕มԽ Haruhi Gakuen Shin Go DeBold Shin Maru Go Bold Pretty Momo 12೥4݄16೔݄༵೔

Slide 109

Slide 109 text

ΞΠίϯΛWeb FontsΛ࢖ͬͯදݱ 12೥4݄16೔݄༵೔

Slide 110

Slide 110 text

ΞΠίϯΛWeb FontsΛ࢖ͬͯදݱ http://www.myfonts.com/fonts/urtd/ico-weather/ Ico Weather 12೥4݄16೔݄༵೔

Slide 111

Slide 111 text

ΞΠίϯΛWeb FontsΛ࢖ͬͯදݱ http://fortawesome.github.com/Font-Awesome/ Font Awesome 12೥4݄16೔݄༵೔

Slide 112

Slide 112 text

Responsive Design ʹରԠ 12೥4݄16೔݄༵೔

Slide 113

Slide 113 text

Twitter λΠϜϥΠϯΛ࢖ͬͨσϞ •λΠϜϥΠϯςΩετΛWeb FontsʮTypeSquareʯ Λ࢖ͬͯදݱɻ ৚݅ʹΑΓϑΥϯτΛμ ΠφϛοΫ ʹมߋ •ΞΠίϯΛWeb FontsΛ࢖ͬͯදࣔ •Responsive Designɹ •CSS3ʹΑΔϑΣʔυΤϑΣΫτͰදࣔ http://demo.tikeda.net/webfont/ 12೥4݄16೔݄༵೔

Slide 114

Slide 114 text

Web Fontsʹ࢖ΘΕͳ͍ҝͷ৺ಘ 5 12೥4݄16೔݄༵೔

Slide 115

Slide 115 text

࠷ޙʹ •஌ࣝͱ͚ͯͩ͠Ͱͳ͘ɺ·ͣԿ͔࢖ͬͯΈΑ͏ •ࣗ෼ͷ໨ͰͦΕ͕ɺWeb Fontsͷग़൪ͳͷ͔Λ ͪΌΜͱ൑அ͢Δ •ը૾͸ը૾ͷྑ͕͋͞ΔɻWeb Fonts͸ը૾ͷ ୅༻඼Ͱ͸ͳ͍ •ͪΌΜͱݕূΛ͠Α͏ ͦͷઌʹϢʔβʔ͕͍ΔࣄΛৗʹ๨Εͣʹ 12೥4݄16೔݄༵೔

Slide 116

Slide 116 text

࠷ޙʹ ද ݱ ํ ๏ ͸ ແ ݶ େ 12೥4݄16೔݄༵೔

Slide 117

Slide 117 text

࠷ޙʹ Web Fonts͕ࠓޙͲ͏ͳ͍͔ͬͯ͘͸ɺ ͦͷٕज़Λ࢖ͬͨදݱ͕ຊ౰ʹϢʔβʔ͕ ٻΊ͍ͯΔ෺ͳͷ͔ʹ͔͔͍ͬͯΔͱࢥ͍ ·͢ɻ ٕज़ͷਐԽΛͪΌΜͱཧղ͠ɺ ΑΓૉఢͳ ωοτࣾձʹ͍͖ͯ͠·͠ΐ͏ɻ 12೥4݄16೔݄༵೔

Slide 118

Slide 118 text

Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ͝ҙݟ ɾ ࣭͝໰͸ͪ͜Β·Ͱ takujiikeda@gmail.com twitter @tikeda, http://tikeda.net/ 12೥4݄16೔݄༵೔