FontFaceSet: check() Methode
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.
Hinweis: Diese Funktion ist in Web Workers verfügbar.
Die check()-Methode des FontFaceSet gibt true zurück, wenn Sie Text mit der angegebenen Schriftartspezifikation rendern können, ohne zu versuchen, Schriftarten in diesem FontFaceSet zu verwenden, die noch nicht vollständig geladen sind. Das bedeutet, dass Sie die Schriftartspezifikation verwenden können, ohne ein Schriftarten-Swap zu verursachen.
Hinweis:
Die check()-Methode ist nicht dafür gedacht zu überprüfen, ob ein bestimmter Schriftstil gerendert werden kann oder ob eine bestimmte Schriftart vollständig geladen ist. Stattdessen gibt sie true zurück, wenn der angegebene Text unter Verwendung der angegebenen Schriftartspezifikation ohne Schriftarten-Swap gerendert werden kann. Das bedeutet, dass selbst wenn die angeforderte Schriftart nicht verfügbar oder vollständig geladen ist, die Methode dennoch true zurückgeben kann. Dieses Verhalten hilft, visuelle Probleme im Zusammenhang mit Schriftarten-Swaps zu vermeiden, kann jedoch kontraintuitiv sein, wenn Sie versuchen, die Verfügbarkeit einer bestimmten Schriftart zu bestätigen.
Syntax
check(font)
check(font, text)
Parameter
font-
eine Schriftartspezifikation unter Verwendung der Syntax für die CSS
font-Eigenschaft, beispielsweise"italic bold 16px Roboto" text-
Beschränken Sie die Schriftarten auf diejenigen, deren Unicode-Bereich mindestens eines der Zeichen im Text enthält. Dies überprüft keine individuelle Glyphenabdeckung.
Rückgabewert
Ein Boolean-Wert, der true ist, wenn das Rendern von Text mit der angegebenen Schriftartspezifikation nicht versuchen wird, Schriftarten in diesem FontFaceSet zu verwenden, die noch nicht vollständig geladen sind.
Das bedeutet, dass alle Schriftarten in diesem FontFaceSet, die durch die gegebene Schriftartspezifikation übereinstimmen, eine status-Eigenschaft haben, die auf "loaded" gesetzt ist.
Andernfalls gibt diese Funktion false zurück.
Beispiele
Im folgenden Beispiel erstellen wir eine neue FontFace und fügen sie dem FontFaceSet hinzu:
const font = new FontFace("molot", 'url("/shared-assets/fonts/molot.woff2")', {
style: "normal",
weight: "400",
stretch: "condensed",
});
document.fonts.add(font);
Nicht geladene Schriftarten
Die Schriftart ist noch nicht geladen, daher gibt check("12px molot") false zurück, was darauf hinweist, dass wir, wenn wir versuchen, die gegebene Schriftartspezifikation zu verwenden, einen Schriftartladevorgang auslösen werden:
console.log(document.fonts.check("12px molot"));
// false: the matching font is in the set, but is not yet loaded
Systemschriftarten
Wenn wir nur eine Systemschriftart im Argument von check() angeben, wird true zurückgegeben, da wir die Systemschriftart verwenden können, ohne Schriftarten aus dem Satz zu laden:
console.log(document.fonts.check("12px Courier"));
// true: the matching font is a system font
Nicht existierende Schriftarten
Wenn wir eine Schriftart angeben, die nicht im FontFaceSet enthalten ist und keine Systemschriftart ist, gibt check() true zurück, da wir in dieser Situation nicht auf Schriftarten aus dem Satz angewiesen sind:
console.log(document.fonts.check("12px i-dont-exist"));
// true: the matching font is a nonexistent font
System- und nicht geladene Schriftarten
Wenn wir sowohl eine Systemschriftart als auch eine Schriftart im Satz angeben, die noch nicht geladen ist, gibt check() false zurück:
console.log(document.fonts.check("12px molot, Courier"));
// false: `molot` is in the set but not yet loaded
Schriftarten, die geladen werden
Wenn wir eine Schriftart aus dem Satz angeben, die noch geladen wird, gibt check() false zurück:
function check() {
font.load();
console.log(document.fonts.check("12px molot"));
// false: font is still loading
console.log(font.status);
// "loading"
}
check();
Geladene Schriftarten
Wenn wir eine geladene Schriftart aus dem Satz angeben, gibt check() true zurück:
async function check() {
await font.load();
console.log(document.fonts.check("12px molot"));
// true: font has finished loading
console.log(font.status);
// "loaded"
}
check();
Spezifikationen
| Specification |
|---|
| CSS Font Loading Module Level 3 # dom-fontfaceset-check |