1. WebFontを触ってみた話
2012/08/27
silvers
12年8月31日金曜日

2. profile
silvers / @silver_s
HTML, CSS, Perl
Reading Books, Sake
http://www.ofsilvers.com/
12年8月31日金曜日

3. web fonts ?
Google web fonts - http://www.google.com/webfonts/
12年8月31日金曜日

4. font-family
body {
font-family: Arial, sans-serif;
}
font
12年8月31日金曜日

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. 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. format
EOT(EmbeddedOpenType)
MicroSoftが開発
IE用
WOFF(WebOpenFontFormat)
データが軽い
著作権情報を入れられる
12年8月31日金曜日

8. merit / demerit
文字として扱える
検索エンジンに優しい(SEO)
拡大縮小ができる → レスポンシブWebデザイン
画像不要 → 文言変更が楽
画像が減る→ ページ容量が減る
color, text-shadow, letter-spacing, etc...
かっこいい！
12年8月31日金曜日

9. merit / demerit
一部のブラウザが対応していない
古いブラウザ
Android2.0, 2.1
日本語を全部用意するとでかい
数MB単位
12年8月31日金曜日

10. サブセット化
使う文字だけのフォントファイルを作る
ロゴに使用、一部の文字だけ使用みたいなと
きに日本語ファイルのサイズを抑えられる
FontFont Subsetter
http://www.subsetter.com/
日本語フォント未対応
12年8月31日金曜日

11. アイコンとして利用
アイコンなら表示されなくても問題ない？
意味のない文字にアイコンを割り当て？
beforeとかで実装すれば問題ない？
合字フォント楽しい
12年8月31日金曜日

12. 実際に作ってみる
FontForge
http://fontforge.org/ja/
TTEdit(有料)
http://opentype.jp/ttedit.htm
WOFFコンバータ
http://opentype.jp/woffconv.htm
12年8月31日金曜日

13. DEMO
svgを用意してfontforgeを使ってフォントを作
るよ
12年8月31日金曜日

14. まとめ
アイコンに使うには結構いいんじゃないかな
もっと自動化したいよね
fontforge x windows は大変
スマホサイトならwoff, ttfさえあればOKぽい
12年8月31日金曜日

15. Thank you!
icons: PICOL, Android Icons, Pictoico, and Freshpixel.
12年8月31日金曜日