Comment voir les polices utilisées par un site Web • WPShout

Si vous vous êtes déjà demandé comment voir les polices utilisées par un site Web, la réponse est aussi simple que d'ouvrir l'inspecteur de votre navigateur. Comme chaque élément d'un site Web est interprété dans votre navigateur, si vous savez comment utiliser correctement votre inspecteur de navigateur, vous pouvez déterminer les polices, les images, les propriétés CSS et tout autre élément de la page.

Dans cette vidéo de démonstration, nous vous montrons comment utiliser l'inspecteur de navigateur Chrome pour rechercher les polices utilisées par un site Web et même comment commencer à jouer avec ces polices sur une page distincte de ce site.

Voici la démo vidéo:

Et voici un résumé du texte:

Comment trouver les polices utilisées par un site Web

1. Ouvrez l'inspecteur de votre navigateur. Pour ce faire, vous pouvez cliquer sur le bouton droit de la souris et choisir «Inspecter» dans Chrome ou Firefox. Ctrl + Maj + I (Windows) ou Cmd + Maj + I (Mac) devrait également fonctionner.
2. Accédez à l’élément dont vous êtes curieux de connaître la police. Vous pouvez le faire en cliquant sur «Inspecter» sur l’élément lui-même ou en naviguant jusqu’à l’élément situé dans le modèle d’objet de document (DOM) de l’inspecteur du navigateur, sa carte des éléments HTML suivants qui composent le site. (Faites attention aux sections de la page mises en surbrillance lorsque vous vous déplacez dans le DOM.)
3. Une fois que vous êtes sur le bon élément, accédez à l’onglet «Calculé» de l’inspecteur et faites défiler jusqu’à la famille de polices attribut. La liste contient la police de l’élément.

Encore une fois, en plus de vous aider à trouver les polices utilisées par un site Web, l’inspecteur de navigateur peut vous permettre de faire toutes sortes d’expérimentations dans les onglets de votre navigateur. Pour plus de détails, voir la vidéo ci-dessus, notre autre Guide rapide d'utilisation des inspecteurs de navigateur et lisez notre article complet sur les outils de développement Chrome et l'inspecteur de navigateur Chrome.

Comment identifier les polices utilisées par les images d’un site Web

Une torsion supplémentaire: et si vous voulez voir quelle police un image utilise? Par exemple, vous pouvez être curieux de savoir quelles polices sont utilisées dans le logo du site ou dans une infographie. Dans ce cas, l’inspecteur de votre navigateur ne vous sera pas utile.

Font Squirrel Matcherator est génial. Vous pouvez en lire un peu plus sur Matcherator en consultant notre lien à ce sujet, mais voici les bases de l’utilisation de Matcherator pour identifier les polices dans une image:

1. Téléchargez l'image depuis le site (en utilisant le bouton droit de la souris> "Enregistrer l'image sous" ou une autre méthode) et téléchargez-la dans l'interface Matcherator.
2. Utilisez la zone de sélection bleue pour choisir le partie de l'image dont vous voulez analyser la police. (Vous devriez voir le logiciel commencer à mettre de petites «boîtes» autour des éléments qu’il identifie comme des caractères de police.)
3. Cliquez sur "Matcherate It!"

Les résultats devraient vous donner des polices qui correspondent très étroitement au texte sélectionné. Si vous pensez que ce n’est pas un exact correspond, vous pouvez continuer sur Google: par exemple, si le résultat renvoyé est Adagio Slab, recherchez "Polices similaires à Adagio Slab" sur Google et voyez ce qui se présente. Les listes de polices similaires de whatfontis.com semblent être particulièrement utiles.

Merci de votre lecture et découvrez quelques polices de site Web!

en relation