いまさら訊けない Webフォント入門

2015/02/04 GaiaX社内勉強会 @hoto17296

あじぇんだ

1. Webフォントとはなにか

2. Webフォントのよさ

3. Webフォントのつかいかた

1. Webフォントとはなにか

Webサイトでフォントを 変えたいときにどうするかfont-family: "メイリオ", sans-serif;

クライアントに 依存 バリエーション

少ない

好き勝手に フォントを使いたい

@font-face ルール@font-face { font-family: 'ほにゃ字'; src: url('honya.ttf');}

p { font-family: 'ほにゃ字';}

フォント 定義

使用

独自フォントが

使える！！！

( ﾟдﾟ)

ほにゃ字Re http://honya.nyanta.jp/

(余談) 実はIE4から使える

時代が Microsoft に 追いついた

2. Webフォントのよさ

クライアントに依存せずに 好きなフォントが使える

「いや、でも別に　　標準のフォントで　　困ってねーし...」

それだけじゃない

画像の代わりになる• 単色のアイコンなんかはWebフォントにしたほうがいい

• color プロパティだけで色変えれるの最高

• Retinaディスプレイでも荒くならない

• 例： http://hoto.me/ (SNSのアイコン)

画像アイコンだと Retinaディスプレイで 荒くなってダサい

Cooooool!!!

ラスタ画像で Webデザインする 時代は終わった

これからは ベクタ画像の時代

3. Webフォントのつかいかた

つかいかた 4パターン• CDNなWebフォントを使う

• Webフォント用に配布されているフォントを使う

• 普通のフォントをWeb用に変換して使う

• フォント自作

CDNなWebフォントを使う

• Google Fonts が有名

• サーバにフォントファイルを置いておかなくていいので一番手軽

• 日本語のバリエーションが皆無

Webフォント用に配布されているフォントを使う

• アイコン用Webフォントは結構多い

• Bootstrap3 の Glyphicon

• IcoMoon (https://icomoon.io/)

• 日本語フォントはあまりない印象

普通のフォントをWeb用に変換して使う

• 自由度高い

• 規約に注意が必要

• 何も考えずに日本語フォントを 変換すると重すぎて死ぬ

• サブセットの切り出しをするとよい

フォント自作

• がんばってください

今日できなかった話

今日できなかった話• フォントのフォーマットの話

• ちょっと前までは大変だった

• 最近は woff 使っとけばいいっしょ、て感じ

• フォント変換・サブセット切り出しの仕方

• 武蔵システムは神

• Unicode の私用領域の話

Enjoy!!!