Comment savoir quelles polices un site Web utilise?


36

Comment savoir quelle police ou quelles polices un site Web utilise? Existe-t-il des outils ou des extensions de navigateur pouvant simplifier le travail?


1
Voir ma réponse à Stack Overflow pour les outils intégrés dans Chrome et Firefox, et une option de copier-coller pour Safari: stackoverflow.com/questions/884177/…
Arjan

Sans 10 répétitions pour répondre, je le fais ici: comme pour l'instant (2018.3), Fount n'est pas disponible et WhatFont n'est pas accessible dans la boutique de l'additif Firefox; Enfin, je dois entrer dans l'onglet "Style" de l'outil de développement de Chrome / IE / FF / Opera, modifier la propriété pour supprimer chaque police et voir quelle est la police appliquée. Il est vraiment dommage que tous DevTools affiche uniquement la pile de polices complète et non celle réellement appliquée . Même en FF, le "meilleur correspondant" n'est pas le meilleur correspondant; la fenêtre contextuelle "la mieux adaptée" s'affiche sur toutes les polices de la pile ... non?
WesternGun

@WesternGun, qu'entendez-vous par "tous les outils de développement" ? Firefox et Chrome montrent très bien la police actuelle; voir les captures d'écran dans la réponse que j'ai liée dans mon commentaire précédent.
Arjan

OK j'ai oublié la capture d'écran @Arjan. Maintenant c'est évident.
WesternGun

Réponses:


44

Option 1: Utiliser une extension de navigateur (Facile)

Des extensions telles que WhatFont (disponible pour Chrome, Firefox et Safari) facilitent la détection des familles de polices de tout texte d'une page Web. Il vous suffit d'installer l'extension, de l'activer sur un site et de cliquer sur l'élément à inspecter. Les résultats sont affichés dans une boîte flottante, toujours dans le contexte de votre choix.

entrez la description de l'image ici


Option 2: Vérifier manuellement le CSS avec les inspecteurs du navigateur (avancé)

La plupart des navigateurs Web vous permettent de trouver facilement les polices en utilisant right-click→ 'Inspecter' ou 'Inspecter élément'. Vous pouvez également le faire en appuyant sur F12. Cela affichera une liste de styles attachés au site Web, que vous pourrez explorer pour trouver les polices utilisées dans tout élément HTML.

entrez la description de l'image ici

L'utilisation de l'inspecteur n'est pas aussi simple que celle d'une extension, mais elle présente plusieurs avantages. Une certaine compréhension de CSS est nécessaire, car vous aurez généralement besoin de passer par plusieurs styles pour trouver celui qui est appliqué. En règle générale, les styles barrés sont écrasés. Par conséquent, recherchez toujours ceux appliqués en dernier.

Tous les styles de la page sont répertoriés dans l' onglet Style , mais si vous utilisez plutôt l'onglet Calculé , vous pouvez trouver les propriétés activement appliquées à l'élément que vous avez sélectionné, y compris bien sûr la famille de polices.

Enfin, un autre moyen de vérifier rapidement quelles polices sont utilisées globalement (mais PAS comment et où) consiste à accéder à «Application → Cadres → Polices» . Vous y trouverez une liste de toutes les polices référencées (non-système).

Cette deuxième méthode est plus lente, mais l'utilisation de l'inspecteur peut vous donner un bon aperçu de la manière dont la page entière est construite. En outre, de nombreux concepteurs et développeurs l'utilisent comme outil de test des modifications avant de les écrire dans la feuille de style (car la modification d'une ligne CSS dans l'inspecteur déclenche un aperçu en temps réel dans le navigateur).


1
Bien joué :-) une idée - comment savoir quelle police de la pile de familles de polices est celle que vous voyez réellement à l'écran? Je le fais habituellement par essais et erreurs, en supprimant de la première police jusqu'à ce que l'apparence change, mais je suis sûr qu'il existe un meilleur moyen. Dans WhatFont, est-ce celui en italique? (ps bienvenue à nouveau!)
user56reinstatemonica8

@ user568458 Merci :) Je souhaite absolument ajouter des captures d'écran du processus de recherche de la police avec l'inspecteur. J'ai du mal moi-même, même après des années d'utilisation! Mais pour être honnête, je n'ai pas vraiment de technique appropriée, je fais aussi des essais et des erreurs. Dans WhatFont, je pense que le fait d’être en italique signifie que ce n’est pas une police système.
Yisela

@Yisela par curiosité, pourquoi la capture d'écran WhatFont affiche-t-elle une capture de couleur rouge (# ea4858) d'une police bleue? Est-ce juste la couleur que vous avez saisie précédemment ou une erreur? EDIT: Oh, je vois que c'est probablement la couleur de survol lorsque vous avez sélectionné cet élément, ce qui ne semble pas idéal, mais reste cool.
DasBeasto

@DasBeasto Oui, c'est la couleur de vol stationnaire! i.imgur.com/5NLjaEV.png Un bon point cependant, une autre victoire pour l'inspection manuelle, car il vous permet de choisir différents états d'interaction.
Yisela

3
Je voulais également ajouter que Firefox (v35.0) dispose d’un bon inspecteur d’éléments pour les polices. Vous pouvez sélectionner l'onglet de police qui vous donnera tous les détails sur l'élément sélectionné (famille de police, style, type de fichier) ou cliquer sur "afficher toutes les polices utilisées dans la page" pour afficher tout ce qui a été téléchargé du serveur. Ensuite, vous pouvez visiter l'onglet Calculé qui vous indiquera également des éléments tels que la taille de la couleur, etc., sans le fouillis supplémentaire et l'héritage tel que Chrome.
DasBeasto

11

L'élément inspecter du navigateur n'est pas parfait

Utiliser les outils de développement de votre navigateur est un bon moyen de voir quelles polices sont déclarées dans le CSS d'un site Web. Cela ne montre cependant pas quelle police est en cours de rendu (mais uniquement la pile de polices appliquée), la police en cours de rendu peut varier en fonction des polices installées, etc.

Fount est un autre outil utile .

Fount vous dira quelle police Web dans votre pile de polices vous voyez réellement - pas seulement ce qui est censé être vu. Il vous indiquera également la taille, le poids et le style de la police.

Utiliser Fount est aussi simple que d’ajouter un signet. Pas besoin d'installer une application ou des extensions.

Après avoir ajouté le marque-page:

  1. Accédez à n’importe quel site et cliquez sur le bookmarklet Fount.
  2. Cliquez sur le type que vous souhaitez identifier. Répéter.
  3. Pour désactiver le compteur, cliquez simplement sur le bookmarklet.

Fount fonctionne dans Safari, Chrome, Firefox et IE8 +.


Fount est bon étant donné que cela fonctionne aussi pour IE, mais WhatFont se comporte mieux car il vous montre la police visible ainsi que la police spécifiée dans le balisage HTML. Donc, la comparaison est rapide.
Moiz Tankiwala

1
Site down ... pas disponible en 2018
WesternGun

@FaithReaper le site (et le script) fonctionne toujours parfaitement bien pour moi
Cai

1
J'entre sur le site et je vois juste un bloc gris à gauche, sans instruction ou rien? Je ne suis pas capable de télécharger les images, mais ça a l'air bizarre. fount.artequalswork.com/
WesternGun

@FaithReaper, le site devrait ressembler à ceci: i.stack.imgur.com/goShP.png (Vous ne chargez pas les images, c'est juste un marque-page que vous utilisez pour inspecter les polices utilisées sur les sites de diffusion )
Cai

1

J'adore l'extension de navigateur Chrome CSSViewer . Il vous suffit de cliquer dessus et de survoler la police que vous souhaitez identifier pour afficher la famille de polices.

extension chrome spectateur css


-2

FontFinder est créé pour les concepteurs, les développeurs et les typographes. Il permet à un utilisateur d’analyser les informations de police de tout élément d’une page, de copier tout élément de ces informations dans le Presse-papiers et d’effectuer des remplacements en ligne pour tester de nouvelles présentations.

Ce complément est le meilleur moyen de trouver la police et d’autres css, tels que son poids, sa taille et bien d’autres pages Web.


3
Bonjour Khushbu, bienvenue sur GDSE. Pouvez-vous nous dire quoi et où nous pouvons "FontFinder"? De plus, si vous êtes affilié au produit, vous devez indiquer votre affiliation dans vos réponses. Voir Comment ne pas être un spammeur .
Cai

2
Le texte dans la réponse ci-dessus est un copier-coller de chrome.google.com/webstore/detail/font-finder/… et / ou add0n.com/font-finder.html
ChrisW le
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.