Suche senden
Hochladen
ウェブフォントが楽しいよという話
•
4 gefällt mir
•
1,263 views
silvers ofsilvers
Folgen
Diashow-Anzeige
Melden
Teilen
Diashow-Anzeige
Melden
Teilen
1 von 15
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
共有フォルダを汚くしないためにどうするか
共有フォルダを汚くしないためにどうするか
silvers ofsilvers
こんなチームにしたいなあ
こんなチームにしたいなあ
silvers ofsilvers
Surrealism
Surrealism
steve98122
Surrealism
Surrealism
steve98122
Manuel Alegre
Manuel Alegre
bart3881
Lkmm
Lkmm
B.201 - Labolatorium Telematika Teknik Elektro ITS
Scrum Overview
Scrum Overview
silvers ofsilvers
Claudia & Plagiarism
Claudia & Plagiarism
claudydaiz
Empfohlen
共有フォルダを汚くしないためにどうするか
共有フォルダを汚くしないためにどうするか
silvers ofsilvers
こんなチームにしたいなあ
こんなチームにしたいなあ
silvers ofsilvers
Surrealism
Surrealism
steve98122
Surrealism
Surrealism
steve98122
Manuel Alegre
Manuel Alegre
bart3881
Lkmm
Lkmm
B.201 - Labolatorium Telematika Teknik Elektro ITS
Scrum Overview
Scrum Overview
silvers ofsilvers
Claudia & Plagiarism
Claudia & Plagiarism
claudydaiz
2013年と私 - 買ってよかった2013 -
2013年と私 - 買ってよかった2013 -
silvers ofsilvers
2012年と私
2012年と私
silvers ofsilvers
2014年と私と11 bot
2014年と私と11 bot
silvers ofsilvers
Cobbler, Func and Puppet: Tools for Large Scale Environments
Cobbler, Func and Puppet: Tools for Large Scale Environments
ViSenze - Artificial Intelligence for the Visual Web
Zabbix in PPTV
Zabbix in PPTV
ViSenze - Artificial Intelligence for the Visual Web
Fairy Tale Germany
Fairy Tale Germany
claudydaiz
玉子屋のすすめ
玉子屋のすすめ
silvers ofsilvers
Something about Kafka - Why Kafka is so fast
Something about Kafka - Why Kafka is so fast
ViSenze - Artificial Intelligence for the Visual Web
DeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきた
silvers ofsilvers
Weitere ähnliche Inhalte
Andere mochten auch
2013年と私 - 買ってよかった2013 -
2013年と私 - 買ってよかった2013 -
silvers ofsilvers
2012年と私
2012年と私
silvers ofsilvers
2014年と私と11 bot
2014年と私と11 bot
silvers ofsilvers
Cobbler, Func and Puppet: Tools for Large Scale Environments
Cobbler, Func and Puppet: Tools for Large Scale Environments
ViSenze - Artificial Intelligence for the Visual Web
Zabbix in PPTV
Zabbix in PPTV
ViSenze - Artificial Intelligence for the Visual Web
Fairy Tale Germany
Fairy Tale Germany
claudydaiz
玉子屋のすすめ
玉子屋のすすめ
silvers ofsilvers
Something about Kafka - Why Kafka is so fast
Something about Kafka - Why Kafka is so fast
ViSenze - Artificial Intelligence for the Visual Web
DeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきた
silvers ofsilvers
Andere mochten auch
(9)
2013年と私 - 買ってよかった2013 -
2013年と私 - 買ってよかった2013 -
2012年と私
2012年と私
2014年と私と11 bot
2014年と私と11 bot
Cobbler, Func and Puppet: Tools for Large Scale Environments
Cobbler, Func and Puppet: Tools for Large Scale Environments
Zabbix in PPTV
Zabbix in PPTV
Fairy Tale Germany
Fairy Tale Germany
玉子屋のすすめ
玉子屋のすすめ
Something about Kafka - Why Kafka is so fast
Something about Kafka - Why Kafka is so fast
DeNA Creative Seminar #2 に行ってきた
DeNA Creative Seminar #2 に行ってきた
ウェブフォントが楽しいよという話
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日金曜日
Jetzt herunterladen