Détection de la police utilisée dans une page Web

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?

Edit for people wondering why I want to do this: The font I'm detecting contains glyph's that are not available in other fonts and when the user does not have the font I want to display a link asking the user to download that font so they can use my web application with the correct font.

Actuellement, j'affiche le lien de la police de téléchargement pour tous les utilisateurs, je veux seulement l'afficher pour les personnes qui n'ont pas la bonne police installée.

0
Une chose à garder à l'esprit est que certains navigateurs vont remplacer certaines polices manquantes avec des polices similaires, ce qui est impossible à détecter en utilisant le tour JavaScript / CSS. Par exemple, les navigateurs Windows remplaceront Arial pour Helvetica s'il n'est pas installé. L'astuce mentionnée par MojoFilter et dragonmatank indiquera toujours que Helvetica est installée, même si ce n'est pas le cas.
ajouté l'auteur tlrobinson, source
Une petite mise en garde: Si vous proposez un lien pour télécharger Calibri, sachez que même s'il est inclus dans plusieurs produits Microsoft, il ne s'agit pas d'une police gratuite, et vous enfreignez le droit d'auteur en l'offrant. pour télécharger.
ajouté l'auteur Adam Hepton, source

11 Réponses

Je l'ai vu fait dans une sorte d'iffy, mais assez fiable. Fondamentalement, un élément est défini pour utiliser une police spécifique et une chaîne est définie pour cet élément. Si la police de l'élément n'existe pas, elle prend la police de l'élément parent. Donc, ce qu'ils font est de mesurer la largeur de la chaîne rendue. Si elle correspond à ce qu'ils attendaient pour la police désirée par opposition à la police dérivée, elle est présente.

Here's where it came from: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

0
ajouté
Une autre approche utilisant measureText de l'élément canvas : github.com / Wildhoney / DetectFont
ajouté l'auteur Wildhoney, source

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

https://fount.artequalswork.com/

0
ajouté

I wrote a simple JavaScript tool that you can use it to check if a font is installed or not.
It uses simple technique and should be correct most of the time.

jFont Checker on github

0
ajouté
@JonLennartAasenden Pour obtenir la police utilisée, je crois que vous pouvez utiliser la propriété "computedStyle" (j'ai oublié le nom exact mais c'est quelque chose comme ça.)
ajouté l'auteur Derek 朕會功夫, source
La détection de police ne résout pas le problème. Vous pouvez l'utiliser pour itérer les polices déclarées et vérifier ce qui est valide, mais cela donne peu ou pas d'informations sur la police utilisée pour un div donné. Si vous créez des div à partir de JS, comment pouvons-nous savoir quelle police est utilisée?
ajouté l'auteur Jon Lennart Aasenden, source
J'ai écrit une classe qui fonctionne dans tous les navigateurs. Il est écrit en Smart Pascal qui compile en JS, donc je ne peux pas vraiment publier la solution ici - mais en un mot, j'ai dû extraire la chaîne font-family, puis vérifier que chaque police était valide, saisir la première qui était valide - et fonctionne partout. J'ai porté sur "détecteur de police" à smart pascal et fait quelques réglages.
ajouté l'auteur Jon Lennart Aasenden, source
Cela devrait être la réponse acceptée! Excellent travail @Derek.
ajouté l'auteur mkoistinen, source
@JonLennartAasenden Il ne semble pas que votre classe soit infaillible. Les navigateurs vérifieront chaque police en priorité donnée, si elle est installée, mais choisiront parfois d'utiliser une police de priorité inférieure dans la liste, si la police installée de priorité supérieure a des caractères manquants ou des glyphes qui ne correspondent pas aux tailles demandées.
ajouté l'auteur Brandon Elliott, source

Vous pouvez utiliser ce site:

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

Il fait exactement ce que vous voulez ...

0
ajouté

Vous pouvez mettre Adobe Blank dans la police-famille après la police vous vouloir voir, et puis tous les glyphes qui ne sont pas dans cette police ne seront pas rendus.

par exemple.:

font-family: Arial, 'Adobe Blank';

Autant que je sache, il n'y a pas de méthode JS pour dire quels glyphes dans 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 ont des paramètres utilisateur pour les polices serif / sans-serif / monospace et ils ont aussi leurs propres polices de repli codées en dur qu'ils utiliseront si aucun glyphe n'est trouvé dans l'une des polices dans un pile de polices. Le navigateur peut donc afficher des glyphes dans une police qui ne figure pas dans la pile des polices ou dans le paramètre de police du navigateur de l'utilisateur. Chrome Dev Tools vous montrera chaque police rendue pour les glyphes dans l'élément sélectionné . Ainsi, sur votre machine, vous pouvez voir ce qu'il 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 puisse jouer un rôle dans ceci, par exemple. Fenêtre de substitution de polices au niveau des glyphes .

alors...

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 voulez le tester dans JS, vous pouvez rendre des glyphes individuels avec une police-famille incluant Adobe Blank et mesurer leur largeur pour voir si elle est nulle, MAIS vous devrez parcourir chaque glyphe chaque police que vous souhaitez tester , mais bien que vous puissiez connaître les polices d'une pile de polices d'éléments, il est impossible de savoir quelles polices le navigateur de l'utilisateur est configuré pour utiliser au moins certains de vos utilisateurs. La liste des polices que vous parcourez sera incomplète. (Il n'est également pas à l'épreuve du temps si de nouvelles polices sortent et commencent à être utilisées.)

0
ajouté

A technique that works is to look at the computed style of the element. This is supported in Opera and Firefox (and I recon in safari, but haven't tested). IE (7 at least), provides a method to get a style, but it seems to be whatever was in the stylesheet, not the computed style. More details on quirksmode: Get 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 retourner helvetica si cela est installé, 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 significatif.

Un hack intéressant que vous pouvez également 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 faire une page de collecte de statistiques de police astucieux avec cette technique.

0
ajouté
Cela retourne la chaîne complète du CSS comme "Helvetica, Arial, sans-serif". Il ne retourne pas la police en cours d'utilisation.
ajouté l'auteur Tom Kincaid, source

@pat En fait, Safari ne donne pas la police utilisée, Safari retourne toujours la première police de la pile, qu'elle soit installée ou non, du moins selon mon expérience.

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

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

  • "ma fausse police" dans Safari (et je crois que 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 pris un laissez-passer à ce problème et créé Font Unstack, qui teste chaque police dans une pile et retourne la première installée seulement. Il utilise le truc que @MojoFilter mentionne, mais ne renvoie que le premier si plusieurs sont installés. Bien qu'il souffre de la faiblesse mentionnée par @tlrobinson (Windows va substituer silencieusement Arial pour Helvetica et signaler que Helvetica est installée), ça marche plutôt bien.

FontUnstack

0
ajouté

Une forme simplifiée est:

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

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

0
ajouté

il y a une solution simple

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 retournera le type de police Navigateurs utilisateur / visiteur. J'espère que cela aidera

0
ajouté
La raison la plus probable est que cela vérifie uniquement une police définie, et s'il n'y a pas de jeu de polices, il utilise probablement Arial comme police.
ajouté l'auteur Josiah, source
J'essaye ceci dans Safari sur un élément qui a certainement la police d'Arial et je reçois "" comme police. Une quelconque idée du pourquoi?
ajouté l'auteur Alessandro Vermeulen, source

Une autre solution consisterait à 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");
}

Of course it wouldn't solve any copyright issues, however you could always use a freeware font or even make your own font. You will need both .eot & .ttf files to work best.

0
ajouté

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

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

0
ajouté
Je suggère de vérifier Google Fonts pour quelque chose de similaire avant d'acheter quoi que ce soit.
ajouté l'auteur OJFord, source
+1 pour l'incorporation de polices. Cela résout le problème sans avoir à détecter quoi que ce soit.
ajouté l'auteur Andrew Grothe, source
Sauf que, si l'utilisateur est sur une machine Windows, il peut alors visualiser Calibri. C'est le point entier des listes de secours.
ajouté l'auteur dudewad, source
Et votre réponse n'est pas liée à la question, et devrait être un commentaire.
ajouté l'auteur dudewad, source