解剖 Google Fonts

Transcript

1. 解剖 Google Fonts Takanori Oki 最近のWeb技術についてワイワイ語る会

2. ⾃⼰紹介 • Takanori Oki / @takanorip • フロントエンドエンジニア
 10⽉からFOLIO •

   Nuxt.js / Vue.js / React / Polymer • フォントが好き
3. None

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）