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

いまさらけない
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 に
追いついた

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

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

画像の代わりになる
• 単色のアイコンなんかは 
Webフォントにしたほうがいい
• color プロパティだけで色変えれるの最高
• Retinaディスプレイでも荒くならない
• 例： http://hoto.me/ (SNSのアイコン)

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

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

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

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

つかいかた 4パターン
• CDNなWebフォントを使う
• Webフォント用に配布されている 
フォントを使う
• 普通のフォントをWeb用に変換して使う
• フォント自作

CDNなWebフォントを使う
• Google Fonts が有名
• サーバにフォントファイルを 
置いておかなくていいので一番手軽
• 日本語のバリエーションが皆無

Webフォント用に配布されている 
フォントを使う
• アイコン用Webフォントは結構多い
• Bootstrap3 の Glyphicon
• IcoMoon (https://icomoon.io/)
• 日本語フォントはあまりない印象

普通のフォントを 
Web用に変換して使う
• 自由度高い
• 規約に注意が必要
• 何も考えずに日本語フォントを 
変換すると重すぎて死ぬ
• サブセットの切り出しをするとよい

フォント自作
• がんばってください

今日できなかった話
• フォントのフォーマットの話
• ちょっと前までは大変だった
• 最近は woﬀ 使っとけばいいっしょ、て感じ
• フォント変換・サブセット切り出しの仕方
• 武蔵システムは神
• Unicode の私用領域の話

Recommandé