Les polices sont un élément important dans toute conception, et CSS n'est pas différent. Choisir la bonne police peut faire une grande différence dans la lisibilité et l'apparence générale d'un site Web. Heureusement, CSS offre de nombreuses options pour travailler avec les polices.
Polices par défaut
En ce qui concerne les polices, il est important de se rappeler que tous les utilisateurs n'auront pas les mêmes polices installées sur leurs ordinateurs. Pour vous assurer que le texte de votre site est lisible par tout le monde, il est important d'inclure des polices standard dans votre feuille de style. Les polices par défaut sont celles qui sont préinstallées sur la plupart des systèmes d'exploitation, comme Arial, Times New Roman et Verdana.
Pour utiliser les polices par défaut sur votre site, indiquez simplement le nom de la police dans votre feuille de style :
Dans cet exemple, la police Arial sera utilisée si elle est installée sur l'ordinateur de l'utilisateur. Sinon, le navigateur utilisera la police sans empattement par défaut du système d'exploitation.
Polices personnalisées
Si vous souhaitez utiliser une police autre que celle par défaut, vous pouvez utiliser des polices personnalisées sur votre site. Il existe deux façons de procéder : en incorporant la police sur votre site Web ou en utilisant une police hébergée.
Intégrer la police
Pour intégrer une police sur votre site Web, vous devrez télécharger la police et l'ajouter au dossier de votre site Web. Ensuite, vous devrez spécifier la police dans votre feuille de style en utilisant la règle @font-face :
Dans cet exemple, la police MyFont sera intégrée au site et pourra être désignée par le nom "MyFont" dans votre feuille de style.
Utiliser une police hébergée
Si vous ne souhaitez pas intégrer la police sur votre site Web, vous pouvez également utiliser une police hébergée. De nombreux services d'hébergement de polices sont disponibles, tels que Google Fonts et Adobe Fonts.
Pour utiliser une police hébergée, ajoutez simplement le lien vers la police dans votre feuille de style :
Dans cet exemple, la police Roboto sera hébergée par Google Fonts et pourra être référencée dans votre feuille de style.
Spécification des polices
Une fois que vous avez vos polices disponibles, il est temps de les spécifier dans votre feuille de style. Il existe plusieurs propriétés CSS que vous pouvez utiliser pour spécifier les polices :
famille de polices
La propriété font-family spécifie la police qui sera utilisée pour le texte. Vous pouvez spécifier plusieurs polices pour vous assurer que le texte est lisible sur différents systèmes d'exploitation :
taille de police
La propriété font-size spécifie la taille de la police en pixels, en emems ou en pourcentage :
poids de la police
La propriété font-weight spécifie le poids de la police. Les valeurs courantes sont normales et en gras :
style de police
La propriété font-style spécifie le style de police. Les valeurs courantes sont normales et italiques :
transformation de texte
La propriété text-transform spécifie comment le texte doit être transformé. Les valeurs courantes sont les majuscules, les minuscules et les majuscules :
Conclusion
En résumé, les polices sont un élément important dans toute conception et en CSS, il existe de nombreuses options pour les utiliser. Il est important de se rappeler d'inclure des polices par défaut sur votre site pour garantir que le texte est lisible pour tous les utilisateurs. Si vous souhaitez utiliser une police personnalisée, vous pouvez soit l'intégrer à votre site Web, soit utiliser une police hébergée. Et enfin, il existe plusieurs propriétés CSS que vous pouvez utiliser pour spécifier la police, notamment font-family, font-size, font-weight, font-style et text-transform.
