バイドゥ社内勉強会の発表用スライド

1. Web Fontのいま
バイドゥ社内勉強会 秋葉ちひろ
2012.7.27

2. Webフォントについて
2002年から策定が開始
2011年10月4日にW3Cの仕様書でワーキングドラフト
（CSS Fonts Module Level 3）
ブラウザの実装がやっと始まって実用レベルに

3. Webフォントについて
今までは、自分のパソコンに入っているフォントしか表
示できなかった

4. MSゴシック/Windows

5. 新ゴ（モリサワ）・明朝オールド（イワタ）/Windows

6. 海外では先行して発展
くそ重い

7. 海外では先行して発展
文字数が少なく、アルファベット（大文字・小文字）、
数字、記号、などあわせてもせいぜい100∼200KB
オリジナルフォントも作りやすい

8. 日本では難しい理由
文字数が多すぎる（漢字が鬼）
教育漢字（小学6年生までに習う漢字）だけだとして
も1,006字
常用漢字だと2136字
漢検1級の対象漢字となると約6,000字

9. 日本では難しい理由
全部含めるとフォントファイルは10MBにも…
10MB→光回線でも少々しんどい
イーモバ・Wimax、3Gだとストレスになるだけ

10. 日本では難しい理由
昔ながらのフォントベンダーさんの頭がカタい
モリサワ：484書体・52,500円/年
イワタ：1書体あたり・10,500円∼
フォントワークス： 1書体あたり・18,900円∼
モトヤ

11. 日本では難しい理由
昔ながらのフォントベンダーさんの頭がカタい
われわれは紙で勝負だ！
Webで表示できるようになったらコピーされまくり
じゃないか！
ライセンス料はどうするんだ！

12. 本格的サービス開始

13. 本格的なサービス開始
フォントベンダーを巻き込んだWebフォントサービス
イワタ・フォントワークス・モトヤなど
モリサワも加わって約600書体
入会金：10,500円、月額1,050円∼

14. 本格的サービス開始

15. 本格的なサービス開始
モリサワが独自に始めたサービス
PVによって価格が変わる
30万PV：4,200円/3ヶ月

16. メリット
更新のコスパがよい
「Webの特性」と「デザイナーのエゴ」の両立
レスポンシブにもやさしい

17. デメリット
お金がかかる（だいたい月に1,000∼2,000円程度）
表示速度
フォントファイルが重いので閲覧できるまでに時間が
かかる

18. 表示方法
1.使っている文字のみをサブセット化
2.その都度jsで判断

19. 1.使っているフォントのみをサブセット化
HTMLとCSSを送る
使われている文字のみのフォントファイルを返す
今日は暑いですね。
いすはねで暑今日。

20. 1.使っているフォントのみをサブセット化
無駄な文字が省かれるのでフォントファイルは軽くなる
Webサイト全体でもおそらく2,000文字ぐらい
→200KBぐらい
ページ遷移をしても、一度フォントファイルを読み込ん
でいるのでストレスなく見れる

21. 2.その都度jsで判断
jsを読みこませるだけなので導入は簡単
その都度どの文字を使っているのか判定して返す（？）
ので、時間がかかる

22. 2.その都度jsで判断
jsを読みこませるだけなので導入は簡単
その都度どの文字を使っているのか判定して返す（？）
ので、時間がかかる

23. 2.その都度jsで判断
font+さんからAPIが提供されていて、最初のデバイス
フォントを呼び出さずに、
「消えた状態」→「Webフォント」
も可能に
パッと見たときに文字が表示されていない状態になる

24. 2.その都度jsで判断
ユーザーのことを考えるといまいち使う気になれない
ちらつきもいやだし、文字の表示を待つのもいや

25. 使えるところは
どんどん使おう！

26. いまの時点での最良の方法
ナビゲーションやカテゴリタイトルといった、静的な部
分だけサブセット化して使う
動的なコンテンツはデバイスフォントを使う