Window : méthode queryLocalFonts()
Limited availability
Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.
Expérimental: Il s'agit d'une technologie expérimentale.
Vérifiez attentivement le tableau de compatibilité des navigateurs avant de l'utiliser en production.
Contexte sécurisé: Cette fonctionnalité est uniquement disponible dans des contextes sécurisés (HTTPS), pour certains navigateurs qui la prennent en charge.
La méthode queryLocalFonts() de l'interface Window retourne une promesse (Promise) qui se résout avec un tableau d'objets FontData représentant les polices disponibles localement.
Pour utiliser cette méthode, l'utilisateur·ice doit accorder l'autorisation d'accéder aux local-fonts (le statut de l'autorisation peut être interrogé avec l'API Permissions). De plus, cette fonctionnalité peut être bloquée par une Politique d'autorisations définie sur votre serveur.
Syntaxe
queryLocalFonts(options)
Paramètres
optionsFacultatif-
Contient des paramètres de configuration optionnels. Actuellement, une seule propriété est définie :
postscriptNamesFacultatif-
Un tableau de noms PostScript de polices. Si cette option est définie, seules les polices dont les noms PostScript correspondent à ceux du tableau seront incluses dans les résultats ; sinon, toutes les polices seront incluses dans les résultats.
Valeur de retour
Une promesse (Promise) qui se résout avec un tableau d'objets FontData représentant les polices disponibles localement.
Exceptions
NotAllowedErrorDOMException-
L'utilisateur·ice a choisi de refuser l'autorisation d'utiliser cette fonctionnalité lorsqu'il a été présenté avec l'invite de permission du navigateur après que la méthode a été invoquée pour la première fois.
SecurityErrorDOMException-
L'utilisation de cette fonctionnalité a été bloquée par une Politique d'autorisations, ou elle n'a pas été appelée via une interaction de l'utilisateur·ice telle qu'un clic sur un bouton, ou l'origine actuelle est une origine opaque.
Exemples
Pour un exemple interactif fonctionnel, consultez notre démonstration de l'API d'accès aux polices locales (angl.).
Énumération des polices
L'extrait suivant interrogera toutes les polices disponibles et enregistrera les métadonnées. Cela pourrait être utilisé, par exemple, pour remplir un contrôle de sélection de polices.
async function journaliserFontData() {
try {
const policesDisponibles = await window.queryLocalFonts();
for (const fontData of policesDisponibles) {
console.log(fontData.postscriptName);
console.log(fontData.fullName);
console.log(fontData.family);
console.log(fontData.style);
}
} catch (err) {
console.error(err.name, err.message);
}
}
Limiter les résultats retournés
Pour limiter les données de polices retournées à une liste spécifique de polices, utilisez l'option postscriptNames.
async function retournerPolicesSpecifiques() {
const policesDisponibles = await window.queryLocalFonts({
postscriptNames: ["Verdana", "Verdana-Bold", "Verdana-Italic"],
});
return policesDisponibles;
}
Accéder aux données de bas niveau
La méthode blob() fournit un accès aux données SFNT (angl.) de bas niveau — il s'agit d'un format de fichier de police qui peut contenir d'autres formats de police, tels que PostScript, TrueType, OpenType ou Web Open Font Format (WOFF).
async function calculerFormatContour() {
try {
const policesDisponibles = await window.queryLocalFonts({
postscriptNames: ["ComicSansMS"],
});
for (const fontData of policesDisponibles) {
// `blob()` retourne un Blob contenant des données SFNT valides et complètes.
const sfnt = await fontData.blob();
// Extraire uniquement les octets dont nous avons besoin : les 4 premiers octets sont les informations de version SFNT.
// Spécification : https://learn.microsoft.com/en-us/typography/opentype/spec/otff#organization-of-an-opentype-font
const sfntVersion = await sfnt.slice(0, 4).text();
let formatContour = "UNKNOWN";
switch (sfntVersion) {
case "\x00\x01\x00\x00":
case "true":
case "typ1":
formatContour = "truetype";
break;
case "OTTO":
formatContour = "cff";
break;
}
console.log("Format de contour :", formatContour);
}
} catch (err) {
console.error(err.name, err.message);
}
}
Spécifications
| Specification |
|---|
| Local Font Access API # dom-window-querylocalfonts |