Propriétés CSS liées aux polices

Articles

Cet article explique les propriétés CSS liées aux polices.

Vous pouvez en apprendre davantage sur les cas d'utilisation et sur la façon d'écrire des propriétés comme font-style et font-family.

YouTube Video

Création de HTML pour aperçu

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Typographie (liée aux polices)

Propriété `font-size`

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size est une propriété CSS utilisée pour spécifier la taille du texte dans un élément. Elle est utilisée pour ajuster l'importance visuelle du texte et améliorer sa lisibilité. font-size peut être spécifié à l'aide de différentes unités et méthodes.

Principales façons de spécifier les valeurs

Valeurs absolues(px, pt)

Si vous souhaitez utiliser une taille fixe indépendante du navigateur ou de l'appareil, spécifiez les tailles de police en unités absolues comme les pixels ou les points.

1p {
2    font-size: 16px;
3}

px: Les pixels sont l'unité la plus courante. Spécifiez la taille par incréments de 1 pixel.

1p {
2    font-size: 12pt;
3}

pt: Les points sont des unités couramment utilisées dans l'impression. 1 point correspond à 1/72 d'un pouce.

Valeurs relatives(em, rem, %)

Vous pouvez également spécifier des tailles de police relatives sur la base de la taille de police d'un élément parent ou racine. Cela convient pour un design adaptatif.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em est une unité relative basée sur la taille de police de l'élément parent. Si la font-size de l'élément parent est de 16px, alors 1em équivaut à 16px.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem est une unité relative basée sur la taille de police de l'élément racine (généralement l'élément <html>).

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: % est spécifié comme un pourcentage par rapport à la taille de police de l'élément parent.

Mots-clés

Vous pouvez également utiliser des mots-clés pour spécifier facilement des tailles conviviales.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large : Ces mots-clés définissent des tailles de police de base qui varient selon le navigateur mais sont faciles à utiliser.

Mots-clés relatifs

Vous pouvez spécifier des tailles de police relatives à l'aide de mots-clés par rapport à l'élément parent ou à la taille du texte environnant.

1p {
2    font-size: larger;
3}

larger: larger augmente la taille de police par rapport à celle de l'élément parent.

1p {
2    font-size: smaller;
3}

smaller: smaller réduit la taille de police par rapport à celle de l'élément parent.

Exemples d'utilisation courante

Dans le design adaptatif, em et rem sont souvent utilisés pour spécifier des tailles de police flexibles en fonction de la taille des éléments parents ou racines.
Dans un design fixe ou un design précis, il est courant d'utiliser px pour fixer la taille.

Exemples d'ajustements de taille de police

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Conclusion

font-size est une propriété importante pour ajuster l'importance visuelle et la lisibilité du texte. Il est important d'utiliser les unités et les mots-clés de manière appropriée en fonction de l'objectif du design ou pour un design adaptatif flexible.

La propriété `font-family`

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

La propriété font-family peut principalement spécifier les deux types de valeurs suivants :.

Noms de polices spécifiques : Spécifiez le nom d'une police particulière. Spécifiez des polices installées sur le système ou disponibles en tant que polices web.
- Exemple:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Famille de polices génériques : Spécifiez un groupe de polices de remplacement à utiliser lorsqu'une police spécifique est indisponible.
- Exemple:
  - serif: Serif (par exemple, Times New Roman, Georgia)
  - sans-serif: Sans-serif (par exemple, Arial, Verdana)
  - monospace: Monospace (par exemple, Courier New, Lucida Console)
  - cursive: Cursive (par exemple, Comic Sans MS)
  - fantasy: Fantasy (par exemple, Papyrus, Impact)

Comment spécifier `font-family`

Lors de la spécification de plusieurs polices, il est recommandé de séparer les noms des polices par des virgules et d'inclure une police générique en dernier recours.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

Dans ce cas, si Times New Roman est indisponible, Georgia est utilisée, et si aucune des deux n'est disponible, une police serif est utilisée.

La propriété `font-weight`

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight est une propriété CSS utilisée pour spécifier l'épaisseur du texte. Elle joue un rôle essentiel dans l'accentuation visuelle et le style du texte, et est utilisée pour modifier le style de la police. font-weight peut être spécifié en utilisant des nombres ou des mots-clés pour indiquer un éventail d'épaisseurs allant du fin au gras.

Valeurs principales de `font-weight`

Mots-clés

1p {
2    font-weight: normal; /* Default thickness */
3}

normal représente l'épaisseur de police standard. Cela correspond généralement à 400.

1p {
2    font-weight: bold; /* Bold */
3}

bold représente un texte en gras. Cela correspond généralement à 700.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder représente un texte plus gras que son élément parent.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter représente un texte plus fin que son élément parent.

Valeurs numériques

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight peut également être spécifié comme un nombre, allant de 100 à 900. Les nombres plus petits donnent un texte plus fin, tandis que les nombres plus grands donnent un texte plus gras. En général, les familles de polices prennent en charge une plage d'épaisseurs spécifiques, mais tous les nombres ne sont pas disponibles pour toutes les polices.

100: Mince
200: Extra Léger
300: Léger
400: Normal
500: Moyen
600: Semi-Gras
700: Gras
800: Extra Gras
900: Noir

Exemples d'utilisation du `font-weight`

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Utilisation Pratique

Le texte standard utilise généralement 400 (normal).
Pour les titres ou les parties mises en évidence, il est courant d'utiliser 700 (bold).
En fonction du design, des poids intermédiaires comme 500 ou 600 peuvent également être utilisés pour éviter une suraccentuation.

Résumé

font-weight est une propriété qui spécifie l'épaisseur du texte, en utilisant des mots-clés comme normal ou bold, ou des nombres allant de 100 à 900.
lighter et bolder ajustent l'épaisseur relativement à celle de l'élément parent.
Choisir un font-weight approprié en fonction du design et de la lisibilité est important.

La Propriété `font-style`

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style est une propriété CSS utilisée pour spécifier le style des caractères, en particulier pour appliquer des styles italiques ou normaux. Cette propriété est souvent utilisée pour l'accentuation et le design du texte, notamment dans les titres et les citations.

Valeurs Principales de `font-style`

`normal`

1p {
2    font-style: normal;
3}

normal est le style standard des caractères (normalement droits).

`italic`

1p {
2    font-style: italic;
3}

italic rend le texte en italique (incliné). Ce style peut être appliqué si la famille de polices prend en charge l'italique.

`oblique`

1p {
2    font-style: oblique;
3}

oblique rend le texte incliné. Contrairement à italic, si la police ne dispose pas d'une version en italique, elle peut incliner artificiellement le texte.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

Spécifiez un angle avec oblique pour incliner le texte selon l'angle indiqué. Cette spécification est destinée à personnaliser davantage oblique. Actuellement, la plupart des navigateurs ne prennent pas en charge la spécification d'angle, mais certains le font.

Utilisation de `font-style`

italic est souvent utilisé pour souligner, pour les citations et pour les titres de livres.
oblique est souvent utilisé lorsqu'une police ne contient pas de style italique, comme un moyen d'incliner le texte artificiellement.
normal est utilisé pour revenir à un style de texte normal.

Résumé

font-style est utilisé pour contrôler l'inclinaison du texte, avec trois valeurs principales : normal, italic et oblique.
En conception, l'italique est souvent utilisé pour mettre du texte en valeur, et si la police ne le prend pas en charge, on peut utiliser oblique pour incliner le texte.

Propriété `color`

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

La propriété color est une propriété fondamentale dans CSS pour spécifier la couleur du texte. Elle est utilisée pour changer la couleur du texte des éléments HTML et peut spécifier des couleurs dans divers formats.

Explication :

La classe color-red spécifie la couleur du texte comme rouge en utilisant un mot-clé.
- Vous pouvez spécifier des noms de couleur tels que red, blue, green qui sont définis dans CSS.
La classe color-hex spécifie les couleurs en utilisant des codes de couleur hexadécimaux.
- Vous pouvez spécifier avec 3 chiffres comme #F00. Dans ce cas, #F00 est de la même couleur que #FF0000.
La classe color-rgb spécifie les couleurs en utilisant le format RGB.
- RGB : Spécifie les composantes rouge, verte et bleue dans une plage de 0 à 255.
La classe color-rgba utilise le format RGBA pour ajouter de la transparence.
La classe color-hsl spécifie les couleurs en utilisant le format HSL.
- Les couleurs peuvent être spécifiées avec la teinte, la saturation et la luminosité. La teinte est spécifiée de 0 à 360 degrés, et la saturation et la luminosité sont spécifiées de 0 % à 100 %.
La classe color-hsla utilise le format HSLA pour ajouter de la transparence.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video

Règles CSS `@`Propriétés CSS liées au texte

Propriétés CSS liées aux polices

YouTube Video

Création de HTML pour aperçu

Typographie (liée aux polices)

Propriété font-size

Principales façons de spécifier les valeurs

Valeurs absolues(px, pt)

Valeurs relatives(em, rem, %)

Mots-clés

Mots-clés relatifs

Exemples d'utilisation courante

Exemples d'ajustements de taille de police

Conclusion

La propriété font-family

Comment spécifier font-family

La propriété font-weight

Valeurs principales de font-weight

Mots-clés

Valeurs numériques

Exemples d'utilisation du font-weight

Utilisation Pratique

Résumé

La Propriété font-style

Valeurs Principales de font-style

normal

italic

oblique

oblique <angle>

Utilisation de font-style

Résumé

Propriété color

Explication :

YouTube Video

Propriété `font-size`

La propriété `font-family`

Comment spécifier `font-family`

La propriété `font-weight`

Valeurs principales de `font-weight`

Exemples d'utilisation du `font-weight`

La Propriété `font-style`

Valeurs Principales de `font-style`

`normal`

`italic`

`oblique`

`oblique <angle>`

Utilisation de `font-style`

Propriété `color`