Enviar búsqueda
Cargar
ウェブフォントが楽しいよという話
•
4 recomendaciones
•
1,263 vistas
silvers ofsilvers
Seguir
Vista de diapositivas
Denunciar
Compartir
Vista de diapositivas
Denunciar
Compartir
1 de 15
Descargar ahora
Descargar para leer sin conexión
Recomendados
共有フォルダを汚くしないためにどうするか
共有フォルダを汚くしないためにどうするか
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
Recomendados
共有フォルダを汚くしないためにどうするか
共有フォルダを汚くしないためにどうするか
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
Más contenido relacionado
Destacado
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
Destacado
(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日金曜日
Descargar ahora