Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Compréhension et Utilisation des Propriétés de Police | Mise en Forme du Texte en CSS
Fondamentaux De CSS

bookCompréhension et Utilisation des Propriétés de Police

Examinons les propriétés les plus courantes liées aux polices de caractères.

selector {
  font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
  font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
  font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
  font-style: normal | italic | oblique; /* only these values available */
}

Remarque

Tous les exemples seront présentés avec le même contenu textuel afin d'observer comment un même texte peut être affiché différemment.

font-family

La propriété font-family définit la ou les familles de polices qui seront utilisées pour afficher le contenu textuel. Il est possible d’indiquer un seul nom de famille de police ou une liste de plusieurs noms de familles de polices séparés par des virgules.

font-size

La propriété font-size définit la taille de la police pour l'affichage du contenu textuel. Elle peut être une taille fixe mesurée en px ou une taille relative mesurée en unités em ou rem.

font-weight

La propriété font-weight détermine l'épaisseur ou la graisse de la police utilisée pour afficher le contenu textuel. Elle peut être spécifiée par une valeur numérique (par exemple, 300, 500, 700, ...) ou par un mot-clé (par exemple, lighter, normal ou bold).

font-style

La propriété font-style spécifie le style de la police à utiliser pour le contenu textuel. Cela peut être normal (valeur par défaut), italic ou oblique.

Pseudo-classe ::first-letter

La pseudo-classe first-letter sélectionne et stylise la première lettre d’un paragraphe ou d’un titre. Pour utiliser cette pseudo-classe, il faut placer un double :: après un sélecteur et ajouter le mot-clé first-letter.

selector::first-letter {
 /* some styles */
}

Exécutons l’exemple suivant pour observer son fonctionnement.

index.html

index.html

styles.css

styles.css

copy

Résumé

  • font-family définit la police ou les polices de secours pour le texte. Il est possible de lister plusieurs polices pour garantir un rendu correct ;
  • font-size définit la taille du texte à l’aide d’unités absolues (px) ou relatives (em, rem) ;
  • font-weight contrôle l’épaisseur de la police, soit numériquement (100–900), soit avec des mots-clés comme normal ou bold ;
  • font-style détermine le style de la police, tel que normal, italic ou oblique ;
  • La pseudo-classe ::first-letter cible et stylise la première lettre d’un bloc de texte, permettant des effets typographiques créatifs.

1. Quelle propriété détermine l'épaisseur de la police ?

2. Quelle est la valeur par défaut de la propriété font-style en CSS ?

question mark

Quelle propriété détermine l'épaisseur de la police ?

Select the correct answer

question mark

Quelle est la valeur par défaut de la propriété font-style en CSS ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 5

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Awesome!

Completion rate improved to 2.56

bookCompréhension et Utilisation des Propriétés de Police

Glissez pour afficher le menu

Examinons les propriétés les plus courantes liées aux polices de caractères.

selector {
  font-family: 'Montserrat' | 'Oswald' | 'Lato' |...; /* any font family */
  font-size: 12px | 0.5em | 0.8rem |...; /* it can be any value in px/em/rem units */
  font-weight: 400 | 500 | 700 | 900 |...; /* value 100 - 900 */
  font-style: normal | italic | oblique; /* only these values available */
}

Remarque

Tous les exemples seront présentés avec le même contenu textuel afin d'observer comment un même texte peut être affiché différemment.

font-family

La propriété font-family définit la ou les familles de polices qui seront utilisées pour afficher le contenu textuel. Il est possible d’indiquer un seul nom de famille de police ou une liste de plusieurs noms de familles de polices séparés par des virgules.

font-size

La propriété font-size définit la taille de la police pour l'affichage du contenu textuel. Elle peut être une taille fixe mesurée en px ou une taille relative mesurée en unités em ou rem.

font-weight

La propriété font-weight détermine l'épaisseur ou la graisse de la police utilisée pour afficher le contenu textuel. Elle peut être spécifiée par une valeur numérique (par exemple, 300, 500, 700, ...) ou par un mot-clé (par exemple, lighter, normal ou bold).

font-style

La propriété font-style spécifie le style de la police à utiliser pour le contenu textuel. Cela peut être normal (valeur par défaut), italic ou oblique.

Pseudo-classe ::first-letter

La pseudo-classe first-letter sélectionne et stylise la première lettre d’un paragraphe ou d’un titre. Pour utiliser cette pseudo-classe, il faut placer un double :: après un sélecteur et ajouter le mot-clé first-letter.

selector::first-letter {
 /* some styles */
}

Exécutons l’exemple suivant pour observer son fonctionnement.

index.html

index.html

styles.css

styles.css

copy

Résumé

  • font-family définit la police ou les polices de secours pour le texte. Il est possible de lister plusieurs polices pour garantir un rendu correct ;
  • font-size définit la taille du texte à l’aide d’unités absolues (px) ou relatives (em, rem) ;
  • font-weight contrôle l’épaisseur de la police, soit numériquement (100–900), soit avec des mots-clés comme normal ou bold ;
  • font-style détermine le style de la police, tel que normal, italic ou oblique ;
  • La pseudo-classe ::first-letter cible et stylise la première lettre d’un bloc de texte, permettant des effets typographiques créatifs.

1. Quelle propriété détermine l'épaisseur de la police ?

2. Quelle est la valeur par défaut de la propriété font-style en CSS ?

question mark

Quelle propriété détermine l'épaisseur de la police ?

Select the correct answer

question mark

Quelle est la valeur par défaut de la propriété font-style en CSS ?

Select the correct answer

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 5
some-alt