La détection des polices a été utilisé dans une page web

voix
110

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 que l'une des polices définies a été utilisé dans le navigateur de l'utilisateur?

Modifier les gens se demander pourquoi je veux faire: La police je détecte contient de glyphe qui ne sont pas disponibles dans d' autres polices et lorsque l'utilisateur ne dispose pas de la police je veux afficher un lien demandant à l'utilisateur de télécharger cette police afin qu'ils peut utiliser mon application Web avec la police correcte.

Actuellement, je suis affichant le lien de la police de téléchargement pour tous les utilisateurs, je veux montrer que ce pour les personnes qui ne sont pas la bonne police installée.

Créé 03/08/2008 à 22:42
source utilisateur
Dans d'autres langues...                            


11 réponses

voix
59

Je l'ai vu faire dans une sorte de chemin hasardeux, mais assez fiable. Au fond, un élément est configuré pour utiliser une police spécifique et une chaîne est définie à cet élément. Si le jeu de polices pour l'élément n'existe pas, il faut 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 souhaitée par opposition à la police dérivée, il est présent.

Voici d' où il vient: Javascript / CSS police Detector (ajaxian.com, 12 mars 2007)

Créé 03/08/2008 à 22:51
source utilisateur

voix
27

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

jFont Checker sur GitHub

Créé 21/05/2011 à 18:58
source utilisateur

voix
7

@pat En fait, Safari ne donne pas la police utilisée, Safari retourne toujours la première place la police dans la pile, peu importe si elle est installée, au moins dans mon expérience.

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

Si l'on suppose Helvetica est celui installé / utilisé, vous obtenez:

  • « Ma police faux » 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, si je lis qu'ils changent cela dans Opera 10 pour correspondre Gecko.

Je pris un laissez-passer à ce problème et créé la police Désempiler, qui teste chaque police dans une pile et retourne la première installation d'une seule. Il utilise l'astuce que @MojoFilter mentionne, mais seulement renvoie le premier si plusieurs sont installés. Bien qu'il ne souffre de la faiblesse que @tlrobinson mentions (Windows remplacera Arial pour Helvetica en silence et signaler que Helvetica est installé), il fonctionne par ailleurs bien.

FontUnstack

Créé 20/05/2009 à 11:57
source utilisateur

voix
6

il y a une solution simple

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

cette fonction exactement ce que vous voulez faire. Lors de l'exécution Il renvoie l'utilisateur / visiteur Browsers Type de police. Espérons que cela aidera

Créé 29/11/2011 à 09:40
source utilisateur

voix
6

Une forme simplifiée est:

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

Si vous avez besoin quelque chose de plus complet, vérifier ce sur.

Créé 23/10/2011 à 14:32
source utilisateur

voix
6

Une technique qui fonctionne est de regarder le style calculé de l'élément. Cela est pris en charge dans Opera et Firefox (et je recon en safari, mais n'a pas testé). IE (au moins 7), fournit une méthode pour obtenir un style, mais il semble être tout ce qui était dans la feuille de style, pas le style calculé. Plus de détails sur quirksmode: Obtenir Styles

Voici une fonction simple pour saisir 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 c'était:

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

Ensuite, il devrait revenir 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 importante.

Une astuce intéressante que vous pouvez également essayer de créer beaucoup d'éléments cachés avec beaucoup de polices différentes pour tenter de détecter les polices installées sur une machine. Je suis sûr que quelqu'un pourrait faire une police de statistiques nifty page rencontre avec cette technique.

Créé 25/08/2008 à 23:16
source utilisateur

voix
5

Une autre solution serait d'installer la police automatiquement par ce @font-facequi pourrait nier la nécessité d' une 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 , il ne résoudrait pas tous les problèmes de droits d' auteur, mais vous pouvez toujours utiliser une police freeware ou même faire votre propre police. Vous aurez besoin des deux .eotet .ttffichiers pour travailler mieux.

Créé 05/01/2012 à 12:19
source utilisateur

voix
2

Calibri est une police appartenant à Microsoft, et ne doit pas être distribué gratuitement. En outre, l'utilisateur doive télécharger une police spécifique n'est pas très facile à utiliser.

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

Créé 14/11/2012 à 19:56
source utilisateur

voix
1

Vous pouvez utiliser ce site:

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

Il fait exactement ce que vous voulez ...

Créé 11/04/2015 à 20:41
source utilisateur

voix
0

Vous pouvez mettre Adobe Blank dans la famille de polices après la police que vous voulez voir, puis tout Glyphes pas dans cette police ne sera pas rendu.

par exemple:

font-family: Arial, 'Adobe Blank';

Pour autant que je sache il n'y a pas de méthode de JS dire que dans un élément Glyphes sont rendus par lequel la police dans la pile de police pour cet élément.

Cela 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 un glyphe ne se trouve pas dans l' une des polices dans un pile de la police. Ainsi , le navigateur peut rendre certains glyphes dans une police qui ne sont pas dans la pile de la police ou le paramètre de police du navigateur de l'utilisateur. Outils Chrome Dev vous montrer chaque police rendu pour les glyphes dans l'élément sélectionné . Donc , 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 le système de l'utilisateur peut jouer un rôle dans ce domaine comme par exemple la fenêtre fait Remplacement de la police au niveau de glyphe.

alors...

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

Si vous voulez tester dans JS , vous pouvez rendre Glyphes individuels avec une famille de polices , y compris Adobe Blank et de mesurer leur largeur pour voir si elle est égale à zéro, MAIS vous auriez à itérer chaque glyphe complet et chaque police que vous vouliez tester , mais bien que vous pouvez connaître les polices dans une pile d' éléments de police il n'y a aucun moyen de savoir ce que les polices du navigateur de l' utilisateur est configuré pour utiliser pendant au moins certains de vos utilisateurs la liste des polices que vous itérer à travers sera incomplète. (Il est également la preuve ne avenir si de nouvelles polices sortent et commencent à s'y habituer.)

Créé 30/11/2017 à 10:58
source utilisateur

voix
0

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

https://fount.artequalswork.com/

Créé 13/03/2017 à 04:31
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more