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

Translate

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 personnes qui se demandent pourquoi je veux faire cela:La police que je détecte contient des glyphes qui ne sont pas disponibles dans d'autres polices et lorsque l'utilisateur ne possède pas 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 appropriée.

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 la bonne police installée.

This question and all comments follow the "Attribution Required."

Toutes les réponses

Translate

Je l'ai vu faire d'une manière assez douteuse, mais assez fiable. Fondamentalement, un élément est configuré pour utiliser une police spécifique et une chaîne est définie sur cet élément. Si le jeu de polices de l'élément n'existe pas, il prend la police de l'élément parent. Donc, ce qu'ils font est de mesurer la largeur de la chaîne rendue. S'il correspond à ce qu'ils attendaient de la police souhaitée par opposition à la police dérivée, il est présent. Cela ne fonctionnera pas pour les polices à espacement fixe.

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

La source
Translate

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.

Vérificateur jFontsur github

La source
Translate

@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 que d'autres navigateurs Webkit).
  • "ma fausse police, helvetica, san-serif" dans les navigateurs Gecko et IE.
  • "helvetica" dans Opera 9, même si j'ai lu qu'ils sont en train de changer cela dans Opera 10 pour correspondre à Gecko.

J'ai pris une passe à ce problème et crééDépilage des polices, qui teste chaque police d'une pile et ne renvoie que la première police 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é), cela fonctionne bien autrement.

La source
Translate

Un formulaire simplifié est:

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

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

La source
Translate

Une technique qui fonctionne est de regarder le style calculé de l'élément. Ceci est pris en charge dans Opera et Firefox (et je 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 é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 cela était:

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

Ensuite, il devrait renvoyer 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 important.

Un hack intéressant que vous pouvez également essayer est de 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.

La source
Translate

Il existe une solution simple - il suffit d'utiliserelement.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 / du navigateur. J'espère que cela aidera.

La source
Translate

Une autre solution serait d'installer la police automatiquement via@font-facece 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 droit d'auteur, mais vous pouvez toujours utiliser une police freeware ou même créer votre propre police. Vous aurez besoin des deux.eot&.ttffichiers pour fonctionner au mieux.

La source
Translate

Calibri est une police appartenant à Microsoft et ne devrait pas être distribuée gratuitement. De plus, exiger d'un utilisateur qu'il télécharge 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.

La source
Translate

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

https://fount.artequalswork.com/

La source
Translate

Vous pouvez utiliser ce site Web:

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

Il fait exactement ce que vous voulez ...

La source
Translate

Vous pouvez mettreAdobe Blankdans la famille de polices après la police que vous voulez voir, et tous les glyphes qui ne sont pas dans cette police ne seront pas rendus.

par exemple:

font-family: Arial, 'Adobe Blank';

Pour autant que je sache, il n'y a pas de méthode JS pour dire 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 ont des paramètres utilisateur pour les polices serif / sans-serif / monospace et qu'ils ont également leurs propres polices de remplacement codées en dur qu'ils utiliseront si un glyphe n'est trouvé dans aucune des polices d'un pile de polices.Ainsi, le navigateur peut rendre certains glyphes dans une police qui n'est pas dans la pile de polices ou dans le paramètre de police du navigateur de l'utilisateur. Les outils de développement Chrome vous montreront 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 cela, par exempleLa fenêtre effectue la substitution de policesau 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 souhaitez le tester dans JS, vous pouvez rendre des glyphes individuels avec une famille de polices comprenant Adobe Blank et mesurer leur largeur pour voir si elle est égale à zéro,MAISvous devrez parcourir chaque glyphe etchaque 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 une preuve pour l'avenir si de nouvelles polices sortent et commencent à être utilisées.)

La source