Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Fonts with Web Design

Avatar for Takuji Ikeda Takuji Ikeda
April 13, 2012
Design
6
6.4k

Web Fonts with Web Design

2012/04/12 Morisawa TypeSquare Tie-up Seminor on Pasona Tech.
Avatar for Takuji Ikeda

Takuji Ikeda

April 13, 2012
Tweet

More Decks by Takuji Ikeda

See All by Takuji Ikeda
20131101JAGAT_short.pdf
Avatar for Takuji Ikeda tikeda
1
200
UI for everyday's cooking
Avatar for Takuji Ikeda tikeda
39
18k
Patterns of UI Design
Avatar for Takuji Ikeda tikeda
3
940
Sass for everyday's cooking
Avatar for Takuji Ikeda tikeda
21
1.9k

Other Decks in Design

See All in Design
Goodpatch Tour💙 / We are hiring!
Avatar for Goodpatch Inc. goodpatch
31
830k
ポートフォリオ_藤田歩希(ほまれ)
Avatar for Aki Fujita akifujita_homarecreate
0
460
Social Anxiety
Avatar for Kayla Smith ksmith2024
0
200
今日から意識できるアクセシビリティ
Avatar for fumiko fumiko
0
210
私とデザインの10年
Avatar for なつ iflection
0
110
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
Avatar for 448jp | OKI Yoshiya 448jp
0
3.5k
The Golden Whitney
Avatar for OhTristanArt ohtristanart
PRO
0
310
portfolio_YumiYasuda
Avatar for yumi yasuda yum0418
0
240
pixel-art-skill-and-knowhow/ドット絵の経歴と知見
Avatar for Aokashi aokashi
1
250
aya_murakami_portfolio
Avatar for aya ayakaimi1101
0
1.6k
新年あけおめWSの実施スキルをみんなで振り返りタイムのススメ
Avatar for sugiyama sugiyama_sukedachi
0
110
パンくずリストかわいい(breadcrumb so cute)
Avatar for Ysuda ysuda
0
240

Featured

See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
700
Writing Fast Ruby
Avatar for Erik Berlin sferik
628
61k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
10k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
613
210k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Building Applications with DynamoDB
Avatar for Matt Wood mza
94
6.4k
Optimizing for Happiness
Avatar for Tom Preston-Werner mojombo
378
70k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
227
22k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k

Transcript

  1. Takuji Ikeda Web Fonts with Web Design ޿͕Δ“೔ຊޠ Web Fonts”ͷੈք

    WebσβΠϯʹ“ϑΥϯτ”ΛऔΓೖΕΔͱ͸ʁ ʙ ϞϦαϫ ʮType Squareʯ λΠΞοϓηϛφʔ ʙ 2012/4/12 THU @ύιφςοΫ 12೥4݄16೔݄༵೔

  2. ࣗݾ঺հ •஑ా୓࢘ Takuji Ikeda •ΫοΫύουגࣜձࣾɹσβΠφʔ •http://tikeda.net/ɹ •http://d.hatena.ne.jp/tikeda/ ɹ •Twitter: @tikedaɹ

    •ஶॻʰHTML5ςΫχΧϧϨϏϡʔ ʢϦοΫςϨίϜʣ ʱ 12೥4݄16೔݄༵೔

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

  4. AGENDA 1. Web Fonts ͜ͱ͸͡Ί 2. ࢖ͬͯΈΑ͏ Web Fonts 3.

    ʮ࢖͑Δٕज़ʯʹ͢ΔҝͷڧΈͱऑΈ 4. ࣮ફʮTypeSquareʯ 5. Web Fontsʹ࢖ΘΕͳ͍ҝͷ৺ಘ 12೥4݄16೔݄༵೔

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

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

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

  8. Web Fonts ద༻ޙ Jun 501 Jun 201 Fredoka One http://demo.tikeda.net/webfont/demo1.html

    ͖͋ͭ೔هʢσϞ༻ʣ 12೥4݄16೔݄༵೔

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

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

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

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

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

  14. http://nikebetterworld.com/ Nike Better World ࣄྫ঺հʢԤถαΠτʣ Din Display Pro Thin NikeGratton

    12೥4݄16೔݄༵೔

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

  16. http://www.theadventuresofyouandi.com/ The Adventures of You and I. ࣄྫ঺հʢԤถαΠτʣ bello-caps oxtail

    omnes-pro 12೥4݄16೔݄༵೔

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

  18. 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೔݄༵೔

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

  20. http://www.webfontawards.com/ Web Fonts Aword 2011 ࣄྫ঺հ Frutiger LT W01 65

    Bold EgyptianSlateW01-Medium 12೥4݄16೔݄༵೔

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

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

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

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

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

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

    B 12೥4݄16೔݄༵೔

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

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

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

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

  31. CSSʹΑΔ࣮૷ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.woff”) format(“woff”); } h1

    { font-family: “FontName”, sans-serif; } 12೥4݄16೔݄༵೔

  32. CSSʹΑΔ࣮૷ํ๏ @font-face { font-family: ”FontName”; src: url(“FontName.eot?#iefix”) 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೔݄༵೔

  33. ϑΥϯτܗࣜ •.eot (Embedded Open Type) Internet Explorer 8ҎԼʹରԠ͢Δಠࣗܗࣜ •.woffʢWeb Open

    Font Formatʣ ࠷৽ϒϥ΢β͕ରԠΛ࢝Ίͨ΢Σϒઐ༻ܗࣜ •.ttfʢTrue Typeʣ ύιίϯͰೃછΈ͋ΔੜͷϑΥϯτܗࣜ •.svg WebͷϕΫλʔσʔλܗࣜΛϑΥϯτʹԠ༻ 12೥4݄16೔݄༵೔

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  75. Web FontsΛ࢝ΊΔ3ͭͷΞϓϩʔν •Web FontsαʔϏεΛར༻͢Δ ͙͢ʹ࢝ΊΒΕΔɻ Ͱ΋ແྉͩͱ੍ݶ͕͋Δ΋ͷ ͕ଟ͍ɻʮTypeSquareʯ͸ແྉఏڙத •ϑΥϯτΛߪೖͯࣗ͠લαʔόʔ͔Β࢖͏ Ұ൪Φʔι υ

    ο Ϋ εͰඞཁͳεΩϧͷशಘ͕Ͱ͖Δɻ •࢖͍͍ͨϑΥϯτΛ·ͣ͸୳͢ͱ͜Ζ͔Β ࠓ͙͢Ͱ͸ͳͯ͘΋ɺ ײ౓͸͓͚͋͛ͯΔखஈ 12೥4݄16೔݄༵೔

  76. ʮ࢖͑Δٕज़ʯ ʹ͢ΔҝͷڧΈͱऑΈ 3 12೥4݄16೔݄༵೔

  77. ڧΈ 12೥4݄16೔݄༵೔

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  94. ऑΈ 12೥4݄16೔݄༵೔

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

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

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

    12೥4݄16೔݄༵೔

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

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

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

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

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

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

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

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

  106. λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ จࣈྔʹԠͯ͡αΠζͱ΢ΣΠτ͕̑ஈ֊ʹมԽ 26 px 32 px 54 px 110

    px 18 px 12೥4݄16೔݄༵೔

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

  108. λΠ ϜϥΠϯͷϑΥϯτΛμΠφϛοΫʹมߋ ຊจͷ಺༰͔Β4छྨʹ৭ͱfont-family͕มԽ Haruhi Gakuen Shin Go DeBold Shin Maru

    Go Bold Pretty Momo 12೥4݄16೔݄༵೔

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

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

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

  112. Responsive Design ʹରԠ 12೥4݄16೔݄༵೔

  113. Twitter λΠϜϥΠϯΛ࢖ͬͨσϞ •λΠϜϥΠϯςΩετΛWeb FontsʮTypeSquareʯ Λ࢖ͬͯදݱɻ ৚݅ʹΑΓϑΥϯτΛμ ΠφϛοΫ ʹมߋ •ΞΠίϯΛWeb FontsΛ࢖ͬͯදࣔ

    •Responsive Designɹ •CSS3ʹΑΔϑΣʔυΤϑΣΫτͰදࣔ http://demo.tikeda.net/webfont/ 12೥4݄16೔݄༵೔

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

  115. ࠷ޙʹ •஌ࣝͱ͚ͯͩ͠Ͱͳ͘ɺ·ͣԿ͔࢖ͬͯΈΑ͏ •ࣗ෼ͷ໨ͰͦΕ͕ɺWeb Fontsͷग़൪ͳͷ͔Λ ͪΌΜͱ൑அ͢Δ •ը૾͸ը૾ͷྑ͕͋͞ΔɻWeb Fonts͸ը૾ͷ ୅༻඼Ͱ͸ͳ͍ •ͪΌΜͱݕূΛ͠Α͏ ͦͷઌʹϢʔβʔ͕͍ΔࣄΛৗʹ๨Εͣʹ

    12೥4݄16೔݄༵೔

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

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

  118. Ҏ্ɺ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ͝ҙݟ ɾ ࣭͝໰͸ͪ͜Β·Ͱ [email protected] twitter @tikeda, http://tikeda.net/ 12೥4݄16೔݄༵೔