フォントもくもく会 #2でやりたいこと

gistfile1.md

unicode-range の調査

• 使った時と使ってないときのファイルサイズの差
  • できればUnicodeの範囲を分けて計測
    • パスが多い複雑なグリフが固まってるところのがファイルサイズ大きそうと予想
• 使ったときのHTTPリクエスト
  • 実装の中身を見てみたい

ページのテキストを取得して unicode-range を生成するコード

1. 本文の要素を取得してテキストを取得
2. 文字をばらしてユニークな文字だけにする
3. コードポイントを取得
   • サロゲートペアとかよくわかんないけどどうしよう
4. コードポイントから unicode-range デスクリプタの値を生成
   • 最初はベタに書こうか
   • 範囲をまとめたり、おおまかな範囲にマップしたり
5. Font Loading APIでリクエスト＆適用

navigator.connect について調べる

• 概要について
• 複数originでのフォントをキャッシュさせるpseudoコード

使った時と使ってないときのファイルサイズの差

DevToolsで見た限り、ヘッダとかに特に変化はない…けどrangeが少ないほうが早く表示されている。
ということはあれか、Content-Lengthはそれはそれで、実際にダウンロードしている容量は少ないということなのかなあ。むう。

テキスト→ユニークなコードポイントの配列にするスクリプト：

var getUniqueCharacters = function (string) {
  var charactersArray = string.split('')
  var codePointsArray = charactersArray.map(function (character) {
    return character.codePointAt()
  })
  var uniqueCodePoints = Array.from(new Set(codePointsArray))
  return uniqueCodePoints.sort(function (a, b) {
    return a - b
  })
}

Array.fromがChromeに入ってないので、ちゃんと使うならなんとかせねば。

これからunicode-rangeの文字列を生成したいけど、このままだと数百アイテムのある配列になるので何かしらしないと……

ChromeでもArray.fromやArrow Functionsがサポートされたのでちょっと簡単に書けそう。

const getUniqueCharacters = (string) => {
  let charactersArray = string.split('')
  let codePointsArray = charactersArray.map(character => character.codePointAt())
  let uniqueCodePoints = Array.from(new Set(codePointsArray))
  return uniqueCodePoints.sort((a, b) => a - b)
}