font-weight |
Poids de la police |
---|---|
CSS |
Syntaxe
font-weight: paramètres; |
Paramètres
Paramètre | Description | ||
---|---|---|---|
paramètres | Ce paramètre de propriété permet d'indiquer le poids : | ||
Valeur | Aperçu | Description | |
normal | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères à un affichage normal. Le navigateur utilise la valeur 400 par défaut. | |
bold | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères à un affichage en gras. Le navigateur utilise la valeur 700 par défaut. | |
bolder | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères à un affichage en gras supérieur à celle hérité. | |
lighter | Ceci est un texte d'exemple | Cet attribut permet d'indiquer que l'affichage de la police de caractères à un affichage en gras inférieur à celle hérité. | |
100 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 100. | |
200 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 200. | |
300 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 300. | |
400 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 400. | |
500 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 500. | |
600 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 600. | |
700 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 700. | |
800 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 800. | |
900 | Ceci est un texte d'exemple | Cette valeur permet d'indiquer que l'affichage de la police de caractères à un affichage en gras au niveau 900. |
Description
Cette propriété permet de fixer la variante (normal, majuscule,...) de la police de caractères utilisé.
Remarques
- Valeurs numériques et mot-clefs : La propriété font-weight accepte des valeurs numériques allant de 100 à 900 (par exemple, font-weight: 400 pour un gras normal), ainsi que des mots-clefs comme normal (équivalent à 400) et bold (équivalent à 700). Ces valeurs permettent de contrôler l'épaisseur des caractères de manière précise.
- Compatibilité avec les polices de caractères : L'effet de font-weight dépend de la police de caractères utilisée. Certaines polices de caractères n'ont pas de variantes de poids intermédiaires (comme 200 ou 600), ce qui peut rendre l'effet de certains poids moins visible si la police ne les prend pas en charge.
- Poids de caractères et accessibilité : L'utilisation d'un poids de police de caractères élevé, comme bold, peut améliorer la lisibilité du texte important ou des titres. Toutefois, un usage excessif peut nuire à la lisibilité si le texte devient trop épais, surtout pour les petits caractères.
- Poids normal et gras : Le font-weight par défaut est normal (400), ce qui correspond au poids standard pour la plupart des polices de caractères. Lorsqu'un texte est défini avec bold (700), il devient visuellement plus lourd et attire davantage l'attention.
- Surcharge et hiérarchie visuelle : L'utilisation de différents poids de police peut aider à établir une hiérarchie visuelle sur une page. Par exemple, un titre peut être en bold pour attirer l'attention, tandis que le texte du corps restera en normal ou en poids plus léger pour plus de clarté.
- Comportement avec les polices de caractères Web : Lorsqu'une police de caractères Web est utilisée via @font-face ou des services comme Google Fonts, il est important de s'assurer que les différentes variantes de poids (par exemple, light, regular, bold) sont correctement chargées, sinon la propriété font-weight peut ne pas produire l'effet attendu.
- Poids et performance : L'utilisation de multiples variantes de poids de police peut influencer les performances de chargement d'une page web, car chaque poids peut correspondre à un fichier de police distinct à télécharger. Il est donc conseillé de n'inclure que les variantes nécessaires.
- L'importance de l'espacement : Un poids de police de caractères plus épais peut affecter l'espacement entre les lettres et les lignes. Par exemple, un texte en bold pourrait apparaître plus compact, tandis qu'un texte avec un poids plus léger pourrait sembler plus aéré. Il est utile de jouer avec l'espacement (letter-spacing, line-height) pour compenser ces effets.
Dernière mise à jour : Dimanche, le 20 décembre 2015