Comment récupérer un nom de famille de polices spécifique à l'aide de styles calculés en JavaScript ?

Récupération de la famille de polices calculée en JavaScript

Dans le prolongement d'une enquête précédente, le défi consistant à résoudre la détermination de la famille de polices entre navigateurs se pose. Bien que la détermination de la taille de la police ait été résolue, l'identification de la famille de polices précise pose des difficultés supplémentaires.

La mise en œuvre actuelle extrait uniquement la chaîne de police complète, qui peut comprendre des alternatives empilées telles que « Times New Roman, Georgia, Serif ». Cependant, pour correspondre aux paramètres du menu déroulant de police, nous recherchons un nom de police fixe représentant la police réelle utilisée par l'élément DOM examiné.

En tirant parti de la puissante méthode getComputedStyle(), nous pouvons récupérer la police calculée. -family d'une manière compatible avec la plupart des principaux navigateurs :

<code class="js">let paragraph = document.querySelector('p');
let computedStyle = window.getComputedStyle(paragraph);
let fontfamily = computedStyle.getPropertyValue('font-family'); // e.g. "Times New Roman"</code>

Cette approche garantit que la famille de polices récupérée reflète avec précision la police actuellement rendue sur l'élément DOM, permettant un alignement transparent du menu déroulant des polices.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!