javascript - typo - trouver une police d'écriture à partir d'une image




Comment détecter quelle police parmi les polices définies a été utilisée dans une page Web? (8)

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

  • "ma fausse police" dans Safari (et je crois d’autres navigateurs Webkit).
  • "ma fausse police, helvetica, san-serif" dans les navigateurs Gecko et IE.
  • "helvetica" dans Opera 9, mais j'ai lu qu'ils modifiaient cela dans Opera 10 pour correspondre à Gecko.

J'ai pris une passe à ce problème et créé Font Unstack , qui teste chaque police dans une pile et renvoie le premier installé seulement. Il utilise le truc mentionné 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 Helvetica par Arial et signalera que Helvetica est installé), cela fonctionne bien par ailleurs.

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

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

Comment détecter quelle police parmi les polices définies a été utilisée dans le navigateur de l'utilisateur?

Modifier pour les personnes qui se demandent pourquoi je veux procéder ainsi: 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 lui demandant de télécharger cette police afin peut 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 uniquement l'afficher pour les personnes sur lesquelles la police appropriée n'est pas installée.


Calibri est une police appartenant à Microsoft et ne devrait pas être distribuée gratuitement. De plus, obliger un utilisateur à 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 à votre application.


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 Checker sur github


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

https://fount.artequalswork.com/


Un formulaire simplifié est:

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

Si vous avez besoin de quelque chose de plus complet, allez voir this .


Une autre solution consisterait à installer la police automatiquement via @font-face ce qui pourrait éliminer 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 copyright, mais vous pouvez toujours utiliser une police de type freeware ou même créer votre propre police. Vous aurez besoin des deux fichiers .eot & .eot pour fonctionner au mieux.


Vous pouvez insérer Adobe Blank dans la famille de polices après la police à afficher. Ainsi, les glyphes ne figurant pas dans cette police ne seront pas restitués.

par exemple:

font-family: Arial, 'Adobe Blank';

Autant que je sache, il n’existe pas de méthode JS permettant de déterminer quels glyphes d’un élément sont rendus, par quelle police dans la pile de polices de 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 qu’ils ont également 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. Donc, 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. Chrome Dev Tools vous montrera chaque police rendue pour les glyphes de l'élément sélectionné . Donc, sur votre machine, vous pouvez voir ce qu’il fait, mais il n’ya 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 cette opération, par exemple, Window effectue la 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 repli du navigateur / du système de l'utilisateur, même s'ils ne possèdent pas la police que vous avez spécifiée.

Si vous souhaitez le tester dans JS, vous pouvez générer des glyphes individuels avec une famille de polices, y compris Adobe Blank, et mesurer leur largeur pour voir si elle est égale à zéro, MAIS vous devrez répéter chaque glyphe et chaque police à tester , Toutefois, bien que vous puissiez connaître les polices d'une pile d'éléments, il n'y a aucun moyen de savoir quelles polices le navigateur de l'utilisateur est configuré pour utiliser. Ainsi, pour au moins certains de vos utilisateurs, la liste des polices que vous parcourez sera incomplète. (Il n’ya pas non plus de preuve pour le futur si de nouvelles polices sortent et commencent à être utilisées.)






fonts