font
Raccourci qui définit le style, la graisse, la taille, l’interligne et la police en une seule fois.
- Valeur initiale
suit ses propriétés composantes- Héritée
- Oui
- Animable
- oui, comme ses propriétés composantes
- S’applique à
- tous les éléments
- JavaScript
element.style.font = "600 1rem/1.5 system-ui, sans-serif"
Exemple
#body {
font: 400 1rem/1.6 system-ui, sans-serif;
}
h1 {
font: 700 2rem/1.15 Georgia, serif;
}<h1 style="font: 700 28px/1.15 Georgia, serif; margin: 0 0 8px">Chapitre 1</h1>
<p style="font: 400 16px/1.6 system-ui, sans-serif; margin: 0">Le contenu est dans la police système, le titre dans une police avec empattements.</p>Définition et utilisation
#La propriété font combine plusieurs propriétés de police en une seule déclaration : font-style, font-variant, font-weight, font-size, line-height et font-family. La taille et la police sont obligatoires, et l’interligne se donne après la taille, séparé par une barre oblique : 16px/1.5.
L’ordre compte : le style, la variante et la graisse (dans n’importe quel ordre entre eux) doivent précéder la taille, et la police vient toujours en dernier. Par exemple italic 600 1.25rem/1.4 Georgia, serif.
Le raccourci réinitialise tous les composants omis à leur valeur par défaut. Si vous avez défini un gras auparavant, puis que vous écrivez font: 16px sans-serif, le gras disparaît.
Syntaxe
#font: <style>? <variante>? <graisse>? <taille>[/<interligne>]? <famille>;Valeurs
#- Le minimum : taille et police.
italic 600 20px/1.3 Georgia, serif
Style, graisse, taille avec interligne et police.- Petites capitales dans une police à largeur fixe.
police système
La police utilisée par le système pour les légendes des éléments d’interface.
Valeurs en pratique
#16px sans-serif
.demo { font: 16px sans-serif; }italic 600 20px/1.3 Georgia, serif
.demo { font: italic 600 20px/1.3 Georgia, serif; }small-caps 18px monospace
.demo { font: small-caps 18px monospace; }caption
.demo { font: caption; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Faites attention, car le raccourci réinitialise les parties omises. Quand vous ne voulez changer que la taille, préférez
font-sizeseul. - Dans le raccourci, l’interligne s’écrit après une barre oblique, juste après la taille :
1rem/1.6.
Entrées associées
#- font-familyChoisit une police, avec une liste de polices de secours en cas d’indisponibilité de la première.
- font-sizeDéfinit la taille de la police.
- font-weightDéfinit la graisse de la police, du plus fin au plus gras.
- line-heightDéfinit la hauteur de chaque ligne de texte, l’espacement entre les lignes.
- font-styleActive l’italique ou l’inclinaison du texte.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.