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

StackOverflow https://stackoverflow.com/questions/845

  •  08-06-2019
  •  | 
  •  

Question

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

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

Comment puis-je détecter laquelle des polices définies a été utilisée dans le navigateur de l'utilisateur ?

Modifier pour les gens qui se demandent pourquoi je veux faire ça : La police que je détecte contient des glyphes qui ne sont pas disponibles dans d'autres polices et lorsque l'utilisateur ne dispose pas de la police, je souhaite afficher un lien demandant à l'utilisateur de télécharger cette police afin qu'il puisse utiliser mon application Web avec la police correcte.

Actuellement, j'affiche le lien de téléchargement de la police pour tous les utilisateurs. Je souhaite l'afficher uniquement pour les personnes qui n'ont pas installé la bonne police.

Était-ce utile?

La solution

Je l'ai vu faire d'une manière un peu douteuse, mais assez fiable.Fondamentalement, un élément est défini pour utiliser une police spécifique et une chaîne est définie sur cet élément.Si la police définie pour l'élément n'existe pas, la police de l'élément parent est utilisée.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 opposition à la police dérivée, elle est présente.Cela ne fonctionnera pas pour les polices à espacement fixe.

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

Autres conseils

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 Vérificateur sur github

@pat En fait, Safari ne donne pas la police utilisée, Safari 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 qu'Helvetica soit celui installé/utilisé, vous obtiendrez :

  • "ma fausse police" dans Safari (et je crois dans d'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.

J'ai essayé de résoudre ce problème et j'ai créé Dépiler les polices, qui teste chaque police dans une pile et renvoie uniquement la première installée.Il utilise l'astuce mentionnée par @MojoFilter, mais ne renvoie le premier que si plusieurs sont installés.Bien qu'il souffre de la faiblesse mentionnée par @tlrobinson (Windows remplacera silencieusement Arial par Helvetica et signalera qu'Helvetica est installé), il fonctionne par ailleurs bien.

Un formulaire simplifié est le suivant :

function getFont() {
    return document.getElementById('header').style.font;
}

Si vous avez besoin de quelque chose de plus complet, vérifiez ce dehors.

Une technique qui fonctionne consiste à examiner le style calculé de l'élément.Ceci est pris en charge dans Opera et Firefox (et je le reconnais dans Safari, 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 se trouve dans la feuille de style, et non le style calculé.Plus de détails sur le mode Quirks : Obtenez 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 cela était :

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

Ensuite, il devrait renvoyer helvetica si celle-ci est installée, sinon, arial et enfin, le nom de la police sans empattement 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 pouvez également essayer consiste à créer de nombreux éléments cachés avec de nombreuses 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.

Une autre solution serait d'installer la police automatiquement via @font-face ce qui pourrait annuler le besoin de détection.

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

Bien sûr, cela ne résoudrait aucun problème de droits d'auteur, mais vous pouvez toujours utiliser une police gratuite ou même créer votre propre police.Vous aurez besoin des deux .eot & .ttf fichiers pour fonctionner au mieux.

Il existe une solution simple : utilisez simplement element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

Cette fonction fera exactement ce que vous voulez.Lors de l'exécution, il renverra le type de police de l'utilisateur/navigateur.J'espère que cela aidera.

Calibri est une police appartenant à Microsoft et ne devrait pas être distribuée gratuitement.De plus, demander à un utilisateur de télécharger une police spécifique n'est pas très convivial.

Je suggérerais d'acheter une licence pour la police et de l'intégrer dans votre application.

J'utilise Font.Il vous suffit de faire glisser le bouton Source vers votre barre de favoris, de cliquer dessus puis de cliquer sur un texte spécifique du site.Il affichera alors la police de ce texte.

https://fount.artequalswork.com/

Vous pouvez utiliser ce site :

http://website-font-analyzer.com/

Il fait exactement ce que tu veux...

Tu peux mettre Adobe vierge dans la famille de polices après la police que vous souhaitez voir, puis tous les glyphes ne figurant pas dans cette police ne seront pas rendus.

par exemple.:

font-family: Arial, 'Adobe Blank';

Autant que je sache, il n'existe pas de méthode JS pour savoir quels glyphes d'un élément sont rendus par quelle police dans la pile de polices pour cet élément.

Ceci est compliqué par le fait que les navigateurs disposent de paramètres utilisateur pour les polices serif/sans-serif/monospace et qu'ils disposent également de leurs propres polices de secours codées en dur qu'ils utiliseront si un glyphe n'est trouvé dans aucune des polices d'un fichier. pile de polices. Ainsi, le navigateur peut restituer certains glyphes dans une police qui ne figure pas dans la pile de polices ou dans les paramètres de police du navigateur de l'utilisateur. Chrome Dev Tools vous montrera chaque police rendue pour les glyphes de l'élément sélectionné.Ainsi, sur votre machine, vous pouvez voir ce qu'elle fait, mais il n'y a aucun moyen de savoir ce qui se passe sur la machine d'un utilisateur.

Il est également possible que le système de l'utilisateur joue un rôle dans ce processus, par exemple. La fenêtre effectue la substitution de polices au niveau des glyphes.

donc...

Pour les glyphes qui vous intéressent, vous n'avez aucun moyen de savoir s'ils seront rendus par le navigateur/système de secours de l'utilisateur, même s'ils n'ont pas la police que vous spécifiez.

Si vous souhaitez le tester en JS, vous pouvez restituer des glyphes individuels avec une famille de polices comprenant Adobe Blank et mesurer leur largeur pour voir si elle est nulle, MAIS vous devrez parcourir chaque glyphe et chaque police que vous vouliez tester, mais bien que vous puissiez connaître les polices d'une pile de polices d'éléments, il n'y a aucun moyen de savoir quelles polices le navigateur de l'utilisateur est configuré pour utiliser, donc pour au moins certains de vos utilisateurs, la liste des polices que vous parcourez sera incomplète.(Ce n'est pas non plus à l'épreuve du temps si de nouvelles polices sortent et commencent à être utilisées.)

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top