Comment détecter un de la police a été utilisé 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 une des polices a été utilisé dans le navigateur de l'utilisateur?

Modifier pour des gens qui se demandent pourquoi je veux le faire: La police je suis de détection contient du glyphe qui ne sont pas disponibles dans d'autres polices et lorsque l'utilisateur n'a pas la police, je veux afficher un lien de demander à l'utilisateur de télécharger cette police afin qu'ils puissent utiliser mon application web avec la bonne police.

Actuellement, je suis en affichant le téléchargement de polices lien pour tous les utilisateurs, je veux afficher uniquement ce pour les personnes qui n'ont pas la bonne police.

  • Une chose à garder à l'esprit est que certains navigateurs vont remplacer certaines polices manquantes avec des polices similaires, ce qui est impossible à détecter à l'aide de JavaScript/CSS truc. Par exemple, les Fenêtres des navigateurs substitut Arial, Helvetica, si elle n'est pas installée. Le truc MojoFilter et dragonmatank mentionné signale toujours que l'Helvetica est installé, même s'il ne l'est pas.
  • Une petite note de prudence: Si vous proposez un lien pour télécharger Calibri, être conscients que, même s'il est livré à l'intérieur de plusieurs produits Microsoft, c'est pas une police libre, et vous êtes à la violation du droit d'auteur par l'offrant pour le téléchargement.
InformationsquelleAutor Pat | 2008-08-03
  1. 69

    Je l'ai vu faire dans un genre de terrible, mais assez fiable. Fondamentalement, un élément est défini pour utiliser une police spécifique et une chaîne est définie à cet élément. Si la police définie pour l'élément n'existe pas, il faut de la police de l'élément parent. Donc, ce qu'ils font est de mesurer la largeur de la chaîne affichée. Si elle correspond à ce que l'on attend de la police souhaitée par opposition à la dérivée de la police, il est présent. Cela ne fonctionne pas pour les polices à espacement fixe.

    Voici d'où il vient:
    Javascript/CSS font Détecteur (ajaxian.com; 12 Mar 2007)

    InformationsquelleAutor MojoFilter
  2. 33

    J'ai écrit un simple JavaScript outil que vous pouvez utiliser pour vérifier si une police est installé ou non.

    Il utilise une technique simple et devrait être correct la plupart du temps.

    jFont Checker sur github

    • Ce doit être la accepté de répondre! Excellent travail @Derek.
    • La police de détection de ne pas résoudre le problème. Vous pouvez l'utiliser pour effectuer une itération de la pensée de l'déclaré polices et vérifier ce qui est valide, mais il donne peu ou pas d'information sur ce qu'est la police utilisée pour chaque div. Si vous créez div du JS, comment pouvons-nous savoir quelle est la police utilisée?
    • Pour obtenir la police utilisée, je crois, vous pouvez utiliser le bouton "computedStyle de la propriété" (j'ai oublié le nom exact, mais c'est quelque chose comme ça).
    • J'ai écrit une classe qui fonctionne dans tous les navigateurs. Il est écrit en Smart Pascal qui compile JS, donc je ne peux pas vraiment poster la solution ici - mais en bref, j'ai dû extraire la police de caractères de la famille de chaîne, puis vérifiez que chaque police est valide, prenez la première qui était en vigueur et qui fonctionne partout. Je l'ai porté sur "détecteur de police" pour smart pascal et fait quelques ajustements.
    • Il ne ressemble pas à votre classe à toute épreuve. Les navigateurs vérifier chaque police en priorité, si installé, mais parfois choisir d'utiliser une faible priorité de police dans la liste, si la priorité la plus haute, la police installée a les caractères manquants ou des glyphes qui ne correspondent pas demandé tailles.
    InformationsquelleAutor Derek 朕會功夫
  3. 10

    @pat en Fait, Safari ne donne pas la police utilisée, Safari au lieu de cela renvoie toujours la première police de la pile indépendamment de savoir si il est installé, au moins dans mon expérience.

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

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

    • "mon faux de la police" dans Safari (et je crois que d'autres navigateurs webkit).
    • "mon faux de la police, helvetica, san-serif" dans les navigateurs Gecko et IE.
    • "helvetica" dans Opera 9, mais j'ai lu qu'ils sont en train de changer cela dans Opera 10 pour correspondre à
      Gecko.

    J'ai pris un pass à ce problème et a créé Police Dépiler, qui teste chaque police dans une pile et retourne la première installation d'un seul. Il utilise le truc que @MojoFilter mentionne, mais ne renvoie que la première, si plusieurs sont installés. Bien qu'il ne souffre de la faiblesse de @tlrobinson mentionne (Windows va remplacer Arial, Helvetica silencieusement et le rapport que l'Helvetica est installé), il fonctionne bien.

    InformationsquelleAutor philoye
  4. 9

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

    Ici 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 cet été:

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

    Alors il doit retourner helvetica si ce est installé, si ce n'est, arial, et enfin, le nom du système par défaut sans-serif. Notez que la commande de polices dans votre CSS déclaration est importante.

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

    • Retourne la chaîne de caractères complète de la css comme "Helvetica,Arial,sans-serif". Il ne renvoie pas le réel de la police utilisée.
    InformationsquelleAutor runeh
  5. 8

    Une forme simplifiée est:

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

    Si vous avez besoin de quelque chose de plus complet, de vérifier cette out.

    InformationsquelleAutor Facebiz
  6. 8

    Il existe une solution simple - il suffit d'utiliser element.style.font:

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

    Cette fonction va exactement de faire ce que vous voulez. Sur l'exécution Il sera de retour le type de police de l'utilisateur/navigateur. Espérons que cela aidera.

    • Je vais essayer cela dans Safari sur un élément qui a certainement la police Arial et je suis "" comme la police. Toutes les idées pour lesquelles?
    • La raison la plus probable est que cette fonction ne vérifie pour définir la police, et si il n'y a pas de jeu de polices, c'est probablement en utilisant la police Arial comme police.
    • c'est à cause de l'élément.style renvoie uniquement les valeurs définies dans les attributs de style, et ne retourne aucune valeur, d'ailleurs (c'est à dire les valeurs à partir d'éléments de style, css externe ou de l'agent utilisateur par défaut n'obtiendrez pas retourné). Cette réponse devrait être supprimée car elle est trompeuse/faux. Incroyable qu'il a obtenu une prime!
    InformationsquelleAutor Naeem Ul Wahhab
  7. 7

    Une autre solution serait d'installer la police automatiquement via @font-face qui pourrait nier la nécessité pour la 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 serait pas résoudre tous les problèmes de droit d'auteur, cependant, vous pouvez toujours utiliser un freeware de police ou même faire votre propre police. Vous aurez besoin de .eot & .ttf fichiers pour fonctionner à son meilleur.

    InformationsquelleAutor PaulnOZ
  8. 3

    Calibri est une police détenue par Microsoft, et ne devrait pas être distribué gratuitement. Aussi, l'intervention d'un utilisateur à télécharger une police spécifique n'est pas très convivial.

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

    • +1 pour l'incorporation des polices. Cela résout le problème sans avoir à détecter quoi que ce soit.
    • Je voudrais vous suggérons de consulter les Google Fonts quelque chose de similaire avant d'acheter quoi que ce soit.
    • Sauf, que, si l'utilisateur est sur une machine windows, ils peuvent ensuite consulter les Calibri. C'est l'ensemble de point de repli des listes.
    • Et votre réponse n'est pas liée à la question, et devrait être un commentaire.
    InformationsquelleAutor Mark Kimitch
  9. 2

    Je suis à l'aide de Mouillage. Vous avez juste à glisser la Source bouton à votre barre de favoris, cliquez sur, puis cliquez sur un texte spécifique sur le site web. Il affichera alors la police de ce texte.

    https://fount.artequalswork.com/

    • Cela fonctionne encore, est facile à utiliser.
    InformationsquelleAutor Woppi
  10. 2

    Vous pouvez utiliser ce site web :

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

    C'est exactement ce que vous voulez...

    InformationsquelleAutor user2267379
  11. 1

    Vous pouvez mettre Adobe Vide dans la police-famille après la police que vous souhaitez voir, et puis tout les glyphes pas dans cette police ne sera pas rendu.

    par exemple:

    font-family: Arial, 'Adobe Blank';

    Autant que je suis conscient qu'il n'existe pas de méthode JS dire les glyphes d'un élément sont rendus par la police dans la police de la pile pour cet élément.

    Ceci est compliqué par le fait que les navigateurs ont des paramètres de l'utilisateur pour serif/sans-serif/polices à espacement fixe et ils ont aussi leur propre codée en dur de repli des polices qu'ils vont l'utiliser si un glyphe n'est pas trouvée dans l'une des polices de caractères dans une police de la pile. Afin de navigateur peut rendre certains glyphes d'une police qui n'est pas dans la police de la pile ou le navigateur de l'utilisateur des paramètres de police. Chrome Dev Tools va vous montrer chaque rendue à la police 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 l'ordinateur de l'utilisateur.

    Il est également possible que le système de l'utilisateur peuvent jouer un rôle dans ce domaine, comme par exemple Fenêtre n'Substitution de Polices au niveau glyphe.

    donc...

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

    Si vous voulez le tester en JS vous pourrait rendre les glyphes individuels avec une police de caractères de la famille, y compris Adobe Vide et de mesurer leur largeur pour voir si c'est zéro, MAIS vous auriez à effectuer une itération complète chaque glyphe et chaque police a voulu tester, mais bien que vous pouvez connaître les polices utilisées dans un des éléments de la police de la pile il n'y a aucun moyen de savoir quelles polices le navigateur de l'utilisateur est configuré pour utiliser au moins certains de vos utilisateurs la liste des polices de caractères que vous itérer sera incomplète. (Il n'est également pas d'avenir si de nouvelles polices de sortir et de commencer à être utilisé.)

    InformationsquelleAutor Sam Hasler