Comment savoir quelles polices un site Web utilise

Si vous avez déjà vu un site Web particulièrement attrayant et que vous vous êtes demandé comment voir quelles polices un site Web utilise, la réponse est aussi simple que d'ouvrir l'inspecteur de votre navigateur. Chaque élément d'un site Web est interprété dans votre navigateur. Ainsi, si vous savez utiliser correctement l'inspecteur de votre navigateur, vous pouvez non seulement connaître les sources, mais également les images dont il dispose, les propriétés CSS de tout autre élément trouvé sur la page.

Dans cet article, nous verrons comment utiliser l'inspecteur du navigateur Chrome pour trouver les polices utilisées par un site Web, et même comment commencer à jouer avec elles. Mais d'abord, je vais vous expliquer comment y accéder et quelles fonctionnalités vous avez disponibles dans l'inspecteur.

Accéder à l'inspecteur Chrome

Si vous utilisez le navigateur Chrome et souhaitez inspecter un site Web, la première chose à faire est d'accéder à la fenêtre d'inspection. Il y a plusieurs moyens de le faire:

• En appuyant sur la touche F12, ou
• En cliquant avec le bouton droit sur un certain élément et dans le menu qui s'ouvre, accédez à l'option Inspect . L'avantage de cette méthode est qu'elle met directement en évidence l'élément en question, ou
• En appuyant sur la combinaison de touches Control + Shift + I (sous Windows) ou Cmd + Alt + I (sous Mac), ou
• En accédant au menu Chrome (3 points dans la barre supérieure droite) » Plus d'outils » Outils de développement.

La fenêtre d'inspection peut être affichée intégrée dans la fenêtre du navigateur elle-même ou affichée dans une fenêtre séparée. Pour accéder à ces options, vous pouvez le faire en cliquant sur l'icône de configuration (3 points) en haut à droite de l'inspecteur et en modifiant la valeur de la propriété «Dock Side».

Vous avez également la possibilité d'afficher le contenu de la page en mode d'affichage sur ordinateur ou comme si vous l'affichiez sur un appareil mobile. Cliquez sur le deuxième bouton sur le côté gauche de la barre supérieure de l'inspecteur et vous verrez comment le contenu sera automatiquement affiché comme si vous y accédiez depuis un appareil mobile.

Vous pouvez également indiquer le type d'appareil sur lequel vous souhaitez l'afficher, la taille ou si vous souhaitez l'afficher en mode portrait ou paysage.

Onglets principaux de l'inspecteur

Comme vous l'avez peut-être vu, l'inspecteur est composé de différents onglets.

A partir de chacun d'eux vous aurez accès à différentes fonctionnalités et caractéristiques :

• Eléments : affiche le code HTML de la page, ainsi que les styles appliqués. vous pouvez également les modifier et ajouter rapidement de nouvelles règles.
• Console : affiche les différents messages d'erreur et d'avertissement qui se produisent sur la page (images qui ne se chargent pas, erreurs javascript,…)
• Sources : affiche l'arborescence des ressources de la page. Vous pouvez voir d'où proviennent les différentes ressources et les modifier.
• Réseau : affiche les différentes requêtes effectuées depuis le site, l'accès au contenu de la requête, la réponse obtenue, les délais…
• Performance : affiche les processus en cours d'exécution et sert à mesurer les performances de la page.
• Mémoire : affiche la mémoire consommée lors du chargement et de l'exécution de la page Web.
• Application : affiche des informations utiles sur les ressources utilisées par une application Web.
• Sécurité : affiche des informations sur les différents sites accessibles depuis la page et leurs certificats respectifs.
• Audits : permet de générer un rapport d'audit pour vérifier les erreurs.
• Il existe des plugins qui ajoutent des onglets et des fonctionnalités à l'inspecteur, il peut donc y avoir plus d'onglets. Dans l'image précédente, il est montré que nous avons installé le plugin Redux DevTools .

Onglet Éléments

Revenons maintenant au problème en question : nous voulions connaître la police de n'importe quel contenu d'une page Web.

Comme je l'ai déjà mentionné, à partir de l'onglet Éléments , vous pouvez accéder au code HTML et aux styles des différents éléments de la page dans laquelle vous vous trouvez.

Comme vous pouvez le voir dans l'image ci-dessus, sur la gauche, vous avez la fenêtre principale qui vous montre le code source. Et à droite, vous avez le panneau des règles de style CSS qui s'appliquent aux différents éléments de la page.

En fait, dans le panneau des styles, vous avez trois onglets :

• Styles : affiche les règles CSS appliquées et vous pouvez les modifier et en ajouter de nouvelles.
• Calculé : affiche toutes les règles appliquées à l'élément, avec un panneau qui représente les bordures, la marge et le remplissage de l'élément.
• Event Listeners : affiche l'arborescence des événements qui ont été lancés sur la page et les contrôles concernés par ceux-ci.

Afficher les détails d'un élément

Ainsi, par exemple, si vous accédez à notre page principale Nelio Software, sélectionnez les mots Nelio Software dans le titre et cliquez avec le bouton droit pour inspecter l'élément, l'inspecteur s'ouvre en vous montrant l'image ci-dessus.

Dans l'image de l'inspecteur, vous pouvez voir que la fenêtre principale me dit que le style de titre "Nelio Software" est h1 .

Dans cette même fenêtre, vous avez la possibilité de faire un clic droit sur n'importe quel attribut ou texte et de le modifier ou de le supprimer. Évidemment, toute modification que vous apportez ici ne modifiera pas le contenu d'origine, mais c'est précisément un outil très utile lorsque vous concevez des pages et que vous voulez avoir une idée de l'apparence de toute modification que vous apportez.

Voir la police

Vous savez maintenant qu'il s'agit d'un titre, mais qu'en est-il de la police ?

Eh bien, très simple, dans l'onglet Calculé de l'inspecteur, vous trouverez toutes les propriétés de l'élément sélectionné. Faites défiler jusqu'à l'attribut font-family et vous y trouverez exactement la police qui a le titre de notre site Web.

Et si vous êtes curieux de savoir à quoi ressemblerait cet élément si vous vouliez changer la police, vous allez dans l'onglet Styles , descendez jusqu'à l'attribut font-family et vous pouvez le modifier directement avec la valeur que vous voulez.

Vous verrez automatiquement votre site Web avec le type de police modifié

Comme vous pouvez le voir, l'inspecteur de Google Chrome est un outil très confortable et facile à utiliser pour jouer et essayer le design que vous auriez laissé après avoir appliqué une modification à un élément.

Qu'en est-il de la police d'une image ?

L'inspecteur de Google Chrome, comme vous l'avez vu, vous permet de visualiser les propriétés de n'importe quel élément de votre page. Mais si vous voulez voir la police d'une image sur un site Web, vous ne pourrez pas le voir avec l'inspecteur. L'inspecteur vous montrera les propriétés de l'image en tant que telle insérée dans votre page mais ne vous montrera pas les détails du contenu de cette image.

Pour ce faire, il existe des outils, tels que Font Squirrel Matcherator ou Whatfontis.com, qui peuvent vous aider à identifier la police utilisée dans une image. Pour ce faire, dans les deux outils, vous devez soit télécharger l'image (sur whatfontis.com, vous pouvez également indiquer l'URL de l'image), puis sélectionner la partie de l'image qui contient la lettre que vous souhaitez identifier.

Les deux outils vous montreront tout un ensemble de polices qui correspondent à peu près au texte sélectionné. Mais si vous pensez que ce n'est pas une correspondance exacte, vous pouvez rechercher sur Google des polices similaires à celles indiquées par l'outil et vous verrez ce que vous obtenez.

Image en vedette de Gemma Evans sur Unsplash.