Compré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
styles.css
Résumé
font-familydéfinit la police ou les polices de secours pour le texte. Il est possible de lister plusieurs polices pour garantir un rendu correct ;font-sizedéfinit la taille du texte à l’aide d’unités absolues (px) ou relatives (em, rem) ;font-weightcontrôle l’épaisseur de la police, soit numériquement (100–900), soit avec des mots-clés commenormaloubold;font-styledétermine le style de la police, tel quenormal,italicouoblique;- La pseudo-classe
::first-lettercible 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 ?
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.56Compré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
styles.css
Résumé
font-familydéfinit la police ou les polices de secours pour le texte. Il est possible de lister plusieurs polices pour garantir un rendu correct ;font-sizedéfinit la taille du texte à l’aide d’unités absolues (px) ou relatives (em, rem) ;font-weightcontrôle l’épaisseur de la police, soit numériquement (100–900), soit avec des mots-clés commenormaloubold;font-styledétermine le style de la police, tel quenormal,italicouoblique;- La pseudo-classe
::first-lettercible 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 ?
Merci pour vos commentaires !
