Comment définir le poids de la police en CSS

En CSS, vous pouvez définir l'épaisseur de la police via l'attribut font-weight ; lorsque la valeur de cet attribut est définie sur "plus clair", il s'agit d'un style fin, lorsque la valeur est "normale", il s'agit d'un style fin. est une épaisseur normale, et lorsque la valeur est " "gras" est le style gras, et "plus gras" est le style extra gras.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

CSS peut diviser soigneusement l'épaisseur du texte, et il peut également changer le texte en gras en un affichage d'épaisseur normale. L'épaisseur du texte est définie en CSS via l'attribut : font-weight. Le code ci-dessus couvre presque toutes les valeurs d'épaisseur du texte, et la police elle-même peut être en gras et devenir en gras normal. Par exemple :

.lighter {
    font-weight: lighter;
}
.normal {
    font-weight: normal;
}
.bold {
    font-weight: bold;
}
.bolder {
    font-weight: bolder;
}

<p class="lighter">字体粗细： lighter</p>
<p class="normal">字体粗细： normal</p>
<p class="bold">字体粗细： bold</p>
<p class="bolder">字体粗细： bolder</p>

Le code ci-dessus définit 4 polices d'épaisseurs différentes, qui deviennent plus épaisses dans l'ordre. Les résultats d'exécution sont présentés dans la figure

Afin d'obtenir un contrôle plus détaillé, CSS permet également d'utiliser des nombres pour définir l'épaisseur de la police. Le nombre doit être un multiple entier de 100 et la valeur est comprise entre 100 et 900. Plus la valeur est grande, plus la police est grasse. 400 équivaut à la normale et 700 équivaut à du gras. Les résultats de différentes valeurs sont affichés dans la figure

Le navigateur ajoutera automatiquement le format gras à certains éléments (tels que strong, h1~h6 et b), et certains éléments hériteront également. Le format gras de l'élément parent peut être annulé en utilisant font-weight: normal pour annuler le format gras de ces éléments.

Étude recommandée : "Tutoriel vidéo CSS"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!