Table des matières
ArticlesA lire
Fondamentaux CSS: Comprendre les polices – ITNEXT
Dans ce didacticiel, nous allons apprendre à travailler avec des polices en CSS!
le font La propriété est une propriété abrégée qui peut combiner un certain nombre de sous-propriétés dans une seule déclaration. Par exemple:
font: normal italic small-caps bold 16px/120% "Helvetica", sans-serif;
Cela équivaut à:
font-stretch: normal;
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 16px;
line-height: 120%;
font-family: "Helvetica", sans-serif;
Passons en revue chacune de ces propriétés en détail!
font-family
le font-family la propriété définit la police famille que l’élément utilisera.
La police sélectionnée n’est pas une seule face de police mais celle d’une «famille», car une police est composée d’un certain nombre de sous-polices. Tels que gras, italique, léger, etc.
body {
font-family: Helvetica;
}
Le nom de famille de polices correspond à une police intégrée à la page ou disponible sur le système de l’utilisateur.
Nous pourrions également choisir plusieurs polices comme ceci:
body {
font-family: Helvetica, Arial, sans-serif;
}
Dans ce cas, le navigateur choisira la police suivante, si la première ne peut pas être utilisée. Cela peut se produire s’il est introuvable sur la machine locale de l’utilisateur ou si le serveur dans lequel la police est hébergée est en panne.
Les types de police sont généralement classés en polices Serif, Sans-Serif ou Monospace. Voici quelques-uns des plus populaires:
Serif: Géorgie, Times New Roman
Sans-Serif: Arial, Helvetica, Verdana, Lucida Grande, Trebuchet MS
Monospace: Courier, Courier New, Lucida Console
line-height
le line-height La propriété définit la quantité d’espace au-dessus et au-dessous de notre élément.
p {
line-height: 1.5;
}
Nous pouvons également utiliser les valeurs des mots clés normal,none ainsi qu’un nombre, une longueur (tout Unité CSS), ou pourcentage (étant la taille de police des éléments multipliée par le%).
font-weight
le font-weight La propriété définit la largeur (ou l’épaisseur) de chacun des caractères d’une police. Vous pouvez utiliser les valeurs suivantes:
Notez que bolder & lighter sont relatifs au parent des éléments.
Des valeurs numériques peuvent également être utilisées:
100200300-
400(équivalent ànormal) 500600-
700(équivalent àbold) 800900
Avec 100 étant la police la plus légère, et 900 le plus audacieux.
Pour les valeurs autres que 400 ou 700 pour avoir un effet, la police utilisée doit avoir des faces intégrées correspondant à ces poids.
font-stretch
Avec font-stretch nous pouvons choisir une face étroite ou large de la police. En supposant que la police utilisée contient des faces de police correspondantes.
Les valeurs possibles sont:
ultra-condensedextra-condensedcondensedsemi-condensednormalsemi-expandedexpandedextra-expandedultra-expanded
font-style
le font-style La propriété accepte l’une des trois valeurs possibles: normal, italic, et oblique.
Par exemple, pour définir notre police en italique:
p {
font-style: italic;
}
Il y a très peu de différence entre l’utilisation italic et oblique. Les deux appliquent un effet de pente au texte.
font-size
le font-size La propriété est utilisée pour déterminer la taille des polices. Par exemple:
p {
font-size: 20px;
}
Vous utilisez soit une valeur de longueur valide (telle que px, em, rem un pourcentage, etc.) ou un mot clé de valeur prédéfini.
Les valeurs de mots clés disponibles sont les suivantes:
xx-smallx-smallsmalllargex-largexx-largesmallerlarger
Avec les deux smaller & larger étant relatif à l’élément parent.
Notez que font-size est une valeur obligatoire. Lorsque vous utilisez le font propriété abrégée, la taille doit être définie (sinon elle sera invalide)!
font-variant
le font-variant la propriété est un peu une relique. Il était à l’origine utilisé pour définir le texte en petites majuscules, il avait 3 valeurs:
Les petites majuscules définissent le texte sur des «petites majuscules», c’est-à-dire plus petites que les lettres majuscules normales.
