Save 37% off PRO during our Black Friday Sale! »

解剖 Google Fonts

78f5efc1e98c71e473cc7827de1c5db4?s=47 takanorip
September 27, 2018

解剖 Google Fonts

78f5efc1e98c71e473cc7827de1c5db4?s=128

takanorip

September 27, 2018
Tweet

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)