FontFaceSet: check() メソッド
Baseline
2023
Newly available
Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
check() は FontFaceSet のメソッドで、まだ完全に読み込まれていない FontFaceSet 内のフォントを使用しようとせずに、指定されたフォント指定を使ってテキストをレンダリングすることができれば true を返します。すなわち、フォントスワップを発生させることなく、フォント指定を使用することができます。
構文
check(font)
check(font, text)
引数
font-
CSS の
fontプロパティの構文を使用するフォント指定、例えば"italic bold 16px Roboto"です。 text-
Unicode 範囲がテキスト中の文字の少なくとも 1 つを含んでいるフォントフェイスに限定します。これは個々のグリフが網羅されているかどうかは調べません。
返値
論理値で、指定されたフォント指定でテキストをレンダリングする場合、まだ完全に読み込まれていない FontFaceSet 内のフォントを使用しようしないならば true になります。
すなわち、この FontFaceSet に含まれる、指定されたフォント指定に一致するすべてのフォントは、status プロパティが "loaded" に設定されている、という意味です。
そうでない場合、この関数は false を返します。
例
次の例では、新しい FontFace を作成し、それを FontFaceSet に追加します。
const font = new FontFace("molot", "url(/shared-assets/fonts/molot.woff2)", {
style: "normal",
weight: "400",
stretch: "condensed",
});
document.fonts.add(font);
読み込まれていないフォント
フォントはまだ読み込まれていないので、 check("12px molot") は false を返します。これは、指定されたフォント指定を使用しようとするとフォントの読み込みが発生することを示します。
console.log(document.fonts.check("12px molot"));
// false: 一致するフォントは設定に入っているが、まだ読み込まれていないフォント
システムフォント
check() の引数にシステムフォントだけを指定すると、設定するにはフォントを読み込まずにシステムフォントを使用することができるので、 true を返します。
console.log(document.fonts.check("12px Courier"));
// true: 一致するフォントはシステムフォント
存在しないフォント
FontFaceSet になく、システムフォントでもないフォントを指定した場合、 check() は true を返します。
console.log(document.fonts.check("12px i-dont-exist"));
// true: 一致するフォントは存在しないフォント
メモ:
この状況で Chrome は不正に false を返します。これは攻撃者がブラウザーがどのシステムフォントを保有しているかを簡単にテストできるため、フィンガープリンティングを容易にする可能性があるためです。
システムフォントと読み込まれていないフォント
システムフォントとまだ読み込まれていない集合のフォントの両方を指定した場合、 check() は false を返します。
console.log(document.fonts.check("12px molot, Courier"));
// false: `molot` が集合の中にあるが、読み込まれていない
読み込み中のフォント
集合から読み込み中のフォントを指定した場合、 check() は false を返します。
function check() {
font.load();
console.log(document.fonts.check("12px molot"));
// false: フォントが読み込み中
console.log(font.status);
// "loading"
}
check();
読み込み済みのフォント
読み込んである集合からフォントを指定すると、 check() は true を返します。
async function check() {
await font.load();
console.log(document.fonts.check("12px molot"));
// true: フォントが読み込み完了
console.log(font.status);
// "loaded"
}
check();
仕様書
| Specification |
|---|
| CSS Font Loading Module Level 3 # dom-fontfaceset-check |
ブラウザーの互換性
Loading…