5 façons d’identifier les Polices dans une page Web

Publié par Rob Hope dans Tutoriels de page de destination, le 20 mai 2018

Donc, vous faites votre truc en naviguant sur le Web et tombez sur le combo de polices le plus mal mais vous ne pouvez pas identifier la police? Eh bien, dans cette vidéo (et la liste ci-dessous), je vous montre exactement comment trouver ces polices

Fontanello (Chrome + Firefox)

L’extension Fontanello Chrome et Firefox, à mon avis, est le moyen le plus rapide de savoir quelle police une page Web utilise. Vous faites simplement un clic droit sur le texte, trouvez Fontanello dans le menu et pow il y a la famille de polices et quelques attributs supplémentaires.

WhatFont (Chrome et Safari)

L’extension WhatFont Chrome et Safari est mon option préférée en matière de découverte de polices. Pour activer l’outil, vous devez cliquer sur l’icône de police dans le menu du navigateur. Vous pouvez maintenant sélectionner plusieurs parties de texte permettant une meilleure visualisation de la répartition de la police par rapport à Fontanello.

Visual Inspector (Chrome)

L’extension Visual Inspector Chrome offre un peu plus de profondeur que les deux précédentes. Il vous suffit de cliquer sur l’icône Inspecteur visuel dans le menu Chrome pour activer l’outil, puis de vous rendre dans la section Typographie de la liste déroulante. Vous êtes maintenant présenté avec les familles de polices utilisées avec une ventilation supplémentaire de toute la typographie dans la page Web.

Bon vieux Code d’inspection (Tous les navigateurs)

Donc, si vous essayez d’éviter d’installer des dizaines d’extensions de navigateur, nous pouvons en savoir plus sur les polices utilisées grâce à un bon vieux code d’inspection:

Si vous utilisez Google Chrome, faites un clic droit sur le texte mystère, sélectionnez Inspecter. DevTools apparaît, assurez-vous d’être sur l’onglet Styles et accédez aux attributs de la famille de polices pour en savoir plus sur les polices.

Si vous utilisez Firefox, faites un clic droit sur le texte, sélectionnez Inspecter l’élément. Leur inspecteur apparaît, dirigez-vous maintenant vers l’onglet Polices pratiques pour les informations dont vous avez besoin.

Si vous utilisez Safari, assurez-vous que le menu Développeur est visible en cochant la case en bas de l’onglet Avancé des préférences Safari. Maintenant, faites un clic droit sur le texte, sélectionnez Inspecter l’élément. Ouvrez la barre latérale Détails si elle est fermée et sélectionnez l’option Styles calculés. La section font-family présentera les informations de police dans les attributs de style.

Découvrir les polices renommées (méthode avancée)

Un obstacle auquel nous pouvons faire face est que lorsqu’une famille de polices n’est pas clairement nommée, nous éliminons naturellement les outils et méthodes d’inspection des polices. Nous commençons la mission de récupération en téléchargeant la police.

Il y a plusieurs façons de le faire mais je commence par noter le nom de la police actuelle. Ouvrez maintenant l’outil Inspecteur (j’utilise Google Chrome), dirigez-vous vers l’onglet Application et faites défiler jusqu’à la section Cadres et ouvrez les polices. Nous devons faire correspondre le nom du fichier avec le nom de police indiqué précédemment. Ouvrez maintenant cette police dans un nouvel onglet pour la télécharger. Enfin, nous faisons glisser ce fichier de police dans le génial Que peut faire Ma police? site web et bam, les informations de police sont magnifiquement présentées.

Beaucoup d’amour,
Rob
Twitter: @robhope
LinkedIn: @robhope
Email:

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.