Comment puis-je détecter la police active utilisée dans une page Web ?

Détection de la police active dans une page Web

Lors de la conception de pages Web avec diverses polices, il devient crucial de s'assurer que la police souhaitée est rendu sur le navigateur de l'utilisateur. Cela peut être un défi lorsque plusieurs polices sont définies dans le CSS.

Une approche pour résoudre ce problème consiste à déterminer laquelle des polices spécifiées est réellement utilisée. En identifiant la police active, vous pouvez prendre les mesures appropriées, telles que l'affichage d'un lien de téléchargement pour les polices qui ne sont pas installées sur le système de l'utilisateur.

Technique de détection des polices

Une technique courante utilisée pour la détection des polices consiste à mesurer la largeur du texte rendu à l'aide d'une police spécifique. Si la largeur mesurée correspond à la largeur attendue pour la police souhaitée, cela indique que la police cible est présente sur l'appareil de l'utilisateur. Cependant, cette méthode est moins fiable pour les polices à espacement fixe.

Exemple de mise en œuvre

L'extrait de code suivant illustre comment cette technique peut être implémentée :

<div>
<pre class="brush:php;toolbar:false">// Get the element's width with the desired font
var desiredWidth = document.getElementById("font-detector").offsetWidth;

// Set the element to use a fallback font
document.getElementById("font-detector").style.fontFamily = "monospace";

// Measure the width again using the fallback font
var fallbackWidth = document.getElementById("font-detector").offsetWidth;

// Check if the desired font is installed
if (desiredWidth === fallbackWidth) {
  // The desired font is not installed
} else {
  // The desired font is installed
}

Avantages et limites

Ceci La technique de détection des polices est relativement simple à mettre en œuvre et peut être utilisée pour ajuster dynamiquement le comportement de la page en fonction de la disponibilité de polices spécifiques. Cependant, il peut ne pas être infaillible et peut être influencé par des facteurs tels que les paramètres du navigateur ou les extensions installées par l'utilisateur qui modifient le rendu des polices.