解剖 Google Fonts

Transcript

1. 解剖 Google Fonts Takanori Oki 最近のWeb技術についてワイワイ語る会
2. ⾃⼰紹介 • Takanori Oki / @takanorip • フロントエンドエンジニア
 10⽉からFOLIO • Nuxt.js / Vue.js / React / Polymer • フォントが好き
4. ウェブフォント関連のお仕事 お待ちしております！！
5. Google Fonts
6. ⽇本語フォント 配信開始されましたね！
7. 早期アクセス版って あったよね？
8. 今⽇はそのへんの諸々
9. 丸裸にします
10. ⽇本語ウェブフォントの 問題点
11. 重い
12. ⽇本語フォント重たい問題 • ⽂字数がやたらと多い • JIS第⼀⽔準漢字だけでも約3000字ある • グリフが複雑 • Noto Sans CJK JPはサブセットなしの
 WOFF2形式で11MBある
13. Google Fontsは どうやって問題を 解決しているか
14. Google Fontsの技術 • サブセット化 • ファイル分割 • ユニコードレンジ • HTTP/2 • 機械学習（？）
15. 最先端の技術 もりもり
16. Google Fontsのすごいとこ • CSSだけで使えるようにしたい • ファイルを120個に分割して
 ユニコードレンジを指定して
 必要なファイルだけダウンロードしている • HTTP/2で並列ダウンロード
17. Google Fontsのすごいとこ • ファイル分割のアルゴリズムを導出するのに
 機械学習使ってるっぽい • 検索インデックスのデータとか使って
 ⽂字の利⽤頻度を計算、それをもとに
 ファイル分割 • クロスサイトキャッシングを狙ってる
18. Google Fontsすごい！
19. おわり！ （フォント：Noto Sans CJK JP）