Propriété CSS font
La propriété font est une propriété raccourcie pour les propriétés suivantes :
Vous pouvez définir toutes les 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 des valeurs est manquante, sa valeur par défaut est utilisée.
Toutes les valeurs individuelles de la propriété raccourcie 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. |
| Animable | Oui. font-size, font-weight, font-stretch et line-height sont animables. |
| Version | CSS1 |
| Syntaxe DOM | Object.style.font = "italic normal bold 1em/140% 'Lucida Grande', sans-serif"; |
font en tant que propriété raccourcie
Lors de l'utilisation de cette propriété raccourcie, vous devez connaître quelques points importants à son sujet :
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, gardez à l'esprit qu'elles doivent précéder 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 des 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 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 appliquée à cet élément en utilisant 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-mots-clés ne peuvent être utilisées qu'avec la propriété raccourcie 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 italiques :
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 animables :
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 le graison de la police. Sa valeur par défaut est normal. |
| font-size/line-height | Définit la taille et la hauteur de ligne de la police. Sa valeur par défaut est normal. |
| font-family | Définit la famille de la police. Sa valeur par défaut dépend du navigateur. |
| caption | Police utilisée pour les contrôles avec légende (par ex., boutons, menus déroulants). |
| 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 | Définit la valeur par défaut de la propriété. |
| inherit | Hérite la propriété de l'élément parent. |
Pratique
Quelles sont certaines des propriétés que vous pouvez utiliser pour styliser les polices en CSS ?