ウェブフォントが楽しいよという話

1,625 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,625
On SlideShare
0
From Embeds
0
Number of Embeds
539
Actions
Shares
0
Downloads
4
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

ウェブフォントが楽しいよという話

  1. 1. WebFontを触ってみた話 2012/08/27 silvers12年8月31日金曜日
  2. 2. profile silvers / @silver_s HTML, CSS, Perl Reading Books, Sake http://www.ofsilvers.com/12年8月31日金曜日
  3. 3. web fonts ? Google web fonts - http://www.google.com/webfonts/12年8月31日金曜日
  4. 4. font-family body { font-family: Arial, sans-serif; } font12年8月31日金曜日
  5. 5. font-family @font-face { font-family: ‘myfont’; src: url(‘myfont.eot’); src: local(‘myfont’), url(‘myfont.woff’) format(‘woff’), url(‘myfont.ttf’) format(‘truetype’), url(‘myfont.svg’) format(‘svg’); font } body { font-family: myfont, Arial, sans-serif; font }12年8月31日金曜日
  6. 6. format .EOT 4-8 .WOFF 6+ 3.6+ 5.1+ 9+ 4+ 5+ .OTF/.TTF 4+ 3.5+ 3.1+ 9+ 2+ 4.2+ .SVG 3+12年8月31日金曜日
  7. 7. format EOT(EmbeddedOpenType) MicroSoftが開発 IE用 WOFF(WebOpenFontFormat) データが軽い 著作権情報を入れられる12年8月31日金曜日
  8. 8. merit / demerit 文字として扱える 検索エンジンに優しい(SEO) 拡大縮小ができる → レスポンシブWebデザイン 画像不要 → 文言変更が楽 画像が減る→ ページ容量が減る color, text-shadow, letter-spacing, etc... かっこいい!12年8月31日金曜日
  9. 9. merit / demerit 一部のブラウザが対応していない 古いブラウザ Android2.0, 2.1 日本語を全部用意するとでかい 数MB単位12年8月31日金曜日
  10. 10. サブセット化 使う文字だけのフォントファイルを作る ロゴに使用、一部の文字だけ使用みたいなと きに日本語ファイルのサイズを抑えられる FontFont Subsetter http://www.subsetter.com/ 日本語フォント未対応12年8月31日金曜日
  11. 11. アイコンとして利用 アイコンなら表示されなくても問題ない? 意味のない文字にアイコンを割り当て? beforeとかで実装すれば問題ない? 合字フォント楽しい12年8月31日金曜日
  12. 12. 実際に作ってみる FontForge http://fontforge.org/ja/ TTEdit(有料) http://opentype.jp/ttedit.htm WOFFコンバータ http://opentype.jp/woffconv.htm12年8月31日金曜日
  13. 13. DEMO svgを用意してfontforgeを使ってフォントを作 るよ12年8月31日金曜日
  14. 14. まとめ アイコンに使うには結構いいんじゃないかな もっと自動化したいよね fontforge x windows は大変 スマホサイトならwoff, ttfさえあればOKぽい12年8月31日金曜日
  15. 15. Thank you! icons: PICOL, Android Icons, Pictoico, and Freshpixel.12年8月31日金曜日

×