Comment savoir quelles polices un site Web utilise?

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?

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.

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.

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).

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 +.

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.

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.