La propriété CSS font
La propriété CSS font définit la police d'un élément. Découvrez ses sous-propriétés et essayez des exemples.
La propriété font est une propriété abrégée (shorthand) pour les propriétés suivantes :
Vous pouvez définir toutes ces propriétés dans l'ordre suivant : 1. font-style, 2. font-variant, 3. font-weight, 4. font-stretch, 5. font-size / line-height, 6. font-family. La propriété line-height est utilisée pour définir l'espacement entre les lignes.
Il est obligatoire de définir les valeurs des propriétés font-size et font-family. Si l'une de ces valeurs est absente, sa valeur par défaut est utilisée.
Toutes les valeurs individuelles de la propriété abrégée font qui ne sont pas spécifiées seront définies à leur valeur initiale.
| Propriété | Description |
|---|---|
| Valeur initiale | Valeurs par défaut des propriétés. |
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Héritée | Oui. |
| Animatable | Oui. font-size, font-weight, font-stretch et line-height sont animatables. |
| Version | CSS1 |
| Syntaxe DOM | Object.style.font = "italic normal bold 1em/140% 'Lucida Grande', sans-serif"; |
font en tant que propriété abrégée
Lorsque vous utilisez cette propriété abrégée, vous devez connaître quelques points importants :
Valeurs obligatoires
Les valeurs « font-size » et « font-family » sont considérées comme obligatoires. La déclaration entière sera ignorée si l'une de ces valeurs est absente.
Valeurs optionnelles
Les cinq autres valeurs sont optionnelles. Si vous utilisez l'une de ces valeurs, tenez compte du fait qu'elles doivent apparaître avant la valeur « font-size » dans la déclaration, sinon elles seront ignorées.
Les propriétés font et font-stretch
La propriété font-stretch est prise en charge par tous les navigateurs modernes.
L'héritage pour les valeurs optionnelles
Si vous omettez les valeurs optionnelles, elles n'hériteront pas des valeurs de leur élément parent. Elles seront réinitialisées à leur état initial.
Mots-clés définissant les polices système
Les valeurs suivantes de la propriété font peuvent être utilisées comme mots-clés :
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
Elles définissent la police sur celle utilisée par le système d'exploitation de l'utilisateur pour cette catégorie spécifique. Par exemple, si vous spécifiez la valeur « menu », la police sera définie sur cet élément pour utiliser la même police que celle utilisée par le système d'exploitation pour les menus déroulants et les listes de menus.
Ces valeurs-clés ne peuvent être utilisées qu'avec la propriété abrégée font.
Syntaxe
Syntaxe de la propriété CSS font
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;Exemple de la propriété font :
Exemple de la propriété CSS font avec les propriétés font-style, font-variant, font-weight, font-size, line-height et font-family
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>Résultat
Exemple de la propriété font définie avec des polices en italique :
Exemples de la propriété CSS font avec les propriétés font-family, font-size, font-variant et font-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Exemple de la propriété font où font-size, font-weight et line-height sont animatables :
Exemple d'animation de police avec les propriétés font-size, font-weight, font-stretch et line-height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>Valeurs
| Valeur | Description |
|---|---|
| font-style | Définit le style de la police. Sa valeur par défaut est normal. |
| font-variant | Définit la variante de la police. Sa valeur par défaut est normal. |
| font-weight | Définit la graisse de la police. Sa valeur par défaut est normal. |
| font-size/line-height | Définit la taille de la police et la hauteur de ligne. Sa valeur par défaut est normal. |
| font-family | Définit la famille de polices. Sa valeur par défaut dépend du navigateur. |
| caption | Police utilisée pour les contrôles avec légende (par ex., boutons, listes déroulantes). |
| icon | Police utilisée pour étiqueter les icônes. |
| menu | Police utilisée dans les menus (par ex., menus déroulants et listes de menus). |
| message-box | Police utilisée dans les boîtes de dialogue. |
| small-caption | Police utilisée pour étiqueter les petits contrôles. |
| status-bar | Police utilisée dans les barres d'état des fenêtres. |
| initial | Applique la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de son élément parent. |