Comment détecter laquelle des polices définies a été utilisée dans une page web ?

Question

Supposons que j'ai la règle CSS suivante dans ma page :

body {
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

Comment détecter laquelle des polices définies est utilisée dans le navigateur de l'utilisateur ?

Pour ceux qui se demandent pourquoi je veux faire cela, c'est parce que la police que je détecte contient des glyphes qui sont no disponibles dans d'autres polices. Si l'utilisateur no Je veux qu'il affiche un lien demandant à l'utilisateur de télécharger cette police (afin qu'il puisse utiliser mon application Web avec la bonne police).

Actuellement, j'affiche le lien de téléchargement de la police pour tous les utilisateurs. Je souhaite ne l'afficher que pour les personnes qui font no avoir installé la police correcte.

Answer 1

Je l'ai vu faire d'une manière un peu douteuse, mais assez fiable. En gros, un élément est configuré pour utiliser une police spécifique et une chaîne est associée à cet élément. Si la police définie pour l'élément n'existe pas, elle prend la police de l'élément parent. Donc, ce qu'ils font, c'est mesurer la largeur de la chaîne rendue. Si elle correspond à ce qu'ils attendaient pour la police souhaitée par rapport à la police dérivée, elle est présente. Cela ne fonctionne pas pour les polices monospécifiques.

Voilà d'où ça vient : Détecteur de polices Javascript/CSS (ajaxian.com ; 12 Mar 2007)

Answer 2

J'ai écrit un outil JavaScript simple que vous pouvez utiliser pour vérifier si une police est installée ou non.
Il utilise une technique simple et devrait être correct la plupart du temps.

jFont Checker sur github

Answer 3

En fait, Safari ne donne pas la police utilisée, mais renvoie toujours la première police de la pile, qu'elle soit installée ou non, du moins d'après mon expérience.

font-family: "my fake font", helvetica, san-serif;

En supposant que l'Helvetica est celle installée/utilisée, vous obtiendrez :

• "ma fausse police" dans Safari (et je crois les autres navigateurs webkit).
• "ma fausse police, helvetica, san-serif" dans les navigateurs Gecko et IE.
• "helvetica" dans Opera 9, bien que j'ai lu qu'ils changent cela dans Opera 10 pour correspondre à Gecko.

Je me suis attaqué à ce problème et j'ai créé Démontage de la police qui teste chaque police dans une pile et renvoie uniquement la première police installée. Il utilise l'astuce mentionnée par @MojoFilter, mais ne renvoie que la première si plusieurs sont installées. Bien qu'elle souffre de la faiblesse mentionnée par @tlrobinson (Windows substituera silencieusement Arial à Helvetica et signalera que Helvetica est installé), elle fonctionne bien.

Answer 4

Une technique qui fonctionne consiste à examiner le style calculé de l'élément. Cette technique est prise en charge par Opera et Firefox (et je pense que Safari l'est aussi, mais je n'ai pas testé). IE (7 au moins), fournit une méthode pour obtenir un style, mais il semble que ce soit ce qui était dans la feuille de style, pas le style calculé. Plus de détails sur quirksmode : Obtenir des styles

Voici une fonction simple pour récupérer la police utilisée dans un élément :

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

Si la règle CSS pour ceci était :

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

Ensuite, il doit renvoyer helvetica si celle-ci est installée, sinon, arial, et enfin, le nom de la police sans-serif par défaut du système. Notez que l'ordre des polices dans votre déclaration CSS est important.

Un hack intéressant que vous pourriez aussi essayer est de créer beaucoup d'éléments cachés avec beaucoup de polices différentes pour essayer de détecter quelles polices sont installées sur une machine. Je suis sûr que quelqu'un pourrait créer une page de collecte de statistiques sur les polices avec cette technique.

Answer 5

Je suis tombé sur ça :

Détecteur de polices Javascript/CSS

qui vous permet de détecter les polices disponibles en fonction de leur taille.

À partir de là, vous pouvez déterminer quelle police a été chargée sur la page en utilisant la même technique.