フォントが使われているかは、APIに聞かずにピクセルで測る

Webフォントが本当に使われているかを確かめる方法を、3つ試しました。最初の2つには、どちらもだまされました。

1つ目：フォントのAPIに聞く

ブラウザには、あるフォントがいま使える状態かを問い合わせるインターフェースがあります。

答えてくれるのは、フォントが解析されたか、ファイルのダウンロードが終わったか、です。画面のこの文字列がそのフォントで描かれているかには答えません。

フォントファイルのダウンロードに成功していれば、必要な文字が入っていなくても、答えは「使える」です。

フォントを当てる前と後で文字列の幅を比べ、変わっていればフォントが切り替わったと見なす方法です。

ところが、フォールバックしたフォントに替わっても幅は変わります。測ってわかるのは別のフォントに替わったことまでで、狙ったフォントに替わったかどうかはわかりません。

狙ったフォントとシステムのデフォルトの幅が近ければ、差は誤差と見分けがつかないほど小さくなります。

同じ文字列を2通りの設定でキャンバスに描き、ピクセルを比べます。

2枚がまったく同じなら、狙ったフォントは使われていません。違っていれば、使われています。

この方法なら、どの層の報告も信じる必要がありません。見ているのは、最後に描かれたものそのものです。

いま私たちは検収のとき、できるだけ最終的な表示に近いところで確かめるようにしています。手前の各層の報告が示しているのは、それぞれの持ち分が終わったことだけです。