解剖 Google Fonts - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

⾃⼰紹介 • Takanori Oki / @takanorip • フロントエンドエンジニア  10⽉からFOLIO • Nuxt.js / Vue.js / React / Polymer • フォントが好き

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ウェブフォント関連のお仕事お待ちしております！！

Slide 5

Slide 5 text

Google Fonts

Slide 6

Slide 6 text

⽇本語フォント配信開始されましたね！

Slide 7

Slide 7 text

早期アクセス版ってあったよね？

Slide 8

Slide 8 text

今⽇はそのへんの諸々

Slide 9

Slide 9 text

丸裸にします

Slide 10

Slide 10 text

⽇本語ウェブフォントの問題点

Slide 11

Slide 11 text

重い

Slide 12

Slide 12 text

⽇本語フォント重たい問題 • ⽂字数がやたらと多い • JIS第⼀⽔準漢字だけでも約3000字ある • グリフが複雑 • Noto Sans CJK JPはサブセットなしの  WOFF2形式で11MBある

Slide 13

Slide 13 text

Google Fontsはどうやって問題を解決しているか

Slide 14

Slide 14 text

Google Fontsの技術 • サブセット化 • ファイル分割 • ユニコードレンジ • HTTP/2 • 機械学習（？）

Slide 15

Slide 15 text

最先端の技術もりもり

Slide 16

Slide 16 text

Google Fontsのすごいとこ • CSSだけで使えるようにしたい • ファイルを120個に分割して  ユニコードレンジを指定して  必要なファイルだけダウンロードしている • HTTP/2で並列ダウンロード

Slide 17

Slide 17 text

Google Fontsのすごいとこ • ファイル分割のアルゴリズムを導出するのに  機械学習使ってるっぽい • 検索インデックスのデータとか使って  ⽂字の利⽤頻度を計算、それをもとに  ファイル分割 • クロスサイトキャッシングを狙ってる