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