Skip to main content

Qu'est-ce qu'une "pile de polices" et comment sont-elles utilisées?

" 2 degrés avant la fin du monde " - #DATAGUEULE (Mai 2025)

" 2 degrés avant la fin du monde " - #DATAGUEULE (Mai 2025)

Table des matières:

Anonim

Bien que les images suscitent un vif intérêt en matière de sites Web, c’est le mot écrit qui séduit les moteurs de recherche et qui reprend le contenu de la plupart des sites. En tant que tel, la conception typographique est une partie cruciale de la conception de sites Web. L'importance du texte d'un site s'accompagne de la nécessité de s'assurer qu'il est beau et facile à lire. Cela se fait avec un style CSS (Cascading Style Sheets).

Conformément aux normes de conception Web modernes, lorsque vous souhaitez dicter l'aspect du contenu textuel d'un site Web, vous le ferez à l'aide de CSS. Cela sépare ce style CSS de la structure HTML d'une page. Par exemple, si vous souhaitez définir la police d'une page sur "Arial", vous pouvez le faire en ajoutant la règle de style suivante à votre CSS (cela se ferait probablement dans une feuille de style CSS externe qui alimenterait les styles à chaque fois). page sur le site):

corps {

famille de polices: Arial;

}

Cette police est définie pour le "corps", donc la cascade CSS appliquera le style à tous les autres éléments de la page. En effet, tous les autres éléments HTML sont des enfants de l'élément "body". Les styles CSS tels que la famille de polices ou la couleur sont ensuite transmis en cascade du parent à l'élément enfant. Ce sera le cas sauf si un style plus spécifique est ajouté pour certains éléments. Le seul problème avec ce CSS est que seule une police est spécifiée. Si cette police ne peut pas être trouvée pour une raison quelconque, le navigateur en remplacera une autre. C'est mauvais parce que vous n'avez aucun contrôle sur la police utilisée; le navigateur choisira pour vous et vous n'aimerez peut-être pas ce qu'il a décidé d'utiliser! C'est là qu'intervient une pile de polices.

Une pile de polices est une liste de polices dans la déclaration de famille de polices CSS. Les polices sont répertoriées par ordre de préférence et vous souhaitez qu’elles apparaissent sur le site en cas de problème tel que le chargement d’une police. Une pile de polices permet au concepteur de contrôler l'apparence des polices sur la page Web, même si l'ordinateur ne dispose pas de la police initiale que vous avez appelée.

Alors, à quoi ressemble une pile de polices? Voici un exemple:

corps {

famille de polices: Georgia, "Times New Roman", serif;

}

Il y a quelques choses à noter ici.

Tout d'abord, vous verrez que nous avons séparé les différents noms de police par une virgule. Vous pouvez ajouter autant de polices que vous le souhaitez, à condition qu'elles soient séparées par une virgule. Le navigateur essaiera de charger la première police spécifiée en premier. Si cela échoue, il essaiera chaque police jusqu'à trouver celle qu'il peut utiliser. Dans cet exemple, nous utilisons des polices Web sécurisées, et "Georgia" sera probablement présent sur l'ordinateur de la personne visitant le site (le navigateur recherche sur votre ordinateur les polices spécifiées sur la page. Le site indique donc au ordinateur les polices à charger depuis votre système). Si, pour une raison quelconque, cette police n’était pas trouvée, elle se déplacerait dans la pile et essaierait la police spécifiée suivante.

En ce qui concerne la police suivante, remarquez comment elle est écrite dans la pile. Le nom de "Times New Roman" est placé entre guillemets. En effet, le nom de la police comporte plusieurs mots. Tous les noms de police comportant plus d'un mot (Trebuchet MS, Courier New, etc.) doivent avoir un nom entre guillemets afin que le navigateur sache que tous ces mots font partie d'un nom de police.

Enfin, nous terminons la pile de polices par "serif", qui est une classification de polices générique. Dans le cas peu probable où aucune des polices que vous avez nommées dans votre pile ne soit disponible, le navigateur trouvera simplement une police qui correspond au moins à la classification que vous avez choisie. Par exemple, si vous utilisez des polices sans empattement telles qu'Arial et Verdana, le fait de terminer une pile de polices par la classification "sans-empattement" conservera au moins la police dans cette famille globale en cas de problème de chargement. Certes, il devrait être très rare qu’un navigateur ne trouve aucune des polices répertoriées dans la pile et doive utiliser cette classification générique. Il est donc recommandé de l’inclure de toute façon pour ne pas risquer sa sécurité.

Piles de polices et polices Web

Aujourd'hui, de nombreux sites Web utilisent des polices Web incluses sur le site ainsi que d'autres ressources (telles que les images du site, le fichier Javascript, etc.) ou liées à un emplacement de police hors site tel que Google Fonts ou Typekit. Bien que ces polices doivent se charger car vous liez les fichiers eux-mêmes, vous souhaitez toujours utiliser une pile de polices pour vous assurer de pouvoir contrôler tout problème pouvant survenir. La même chose vaut pour les polices "Web safe" qui devraient figurer sur l’ordinateur de quelqu'un (notez que les polices que nous avons utilisées dans cet article, notamment Arial, Verdana, Georgia et Times New Roman, sont toutes des polices Web safe qui devraient être utilisées. sur l'ordinateur d'une personne). Même s'il est très peu probable qu'une police soit manquante, spécifier une pile de polices aidera autant que possible la conception typographique d'un site.

Article original de Jennifer Krynin. Édité par Jeremy Girard.