Comment définir la taille du texte en CSS

Dans la conception de sites Web, la taille du texte est l'un des éléments très importants. Vous pouvez améliorer la lisibilité de vos pages Web en ajustant la taille du texte, rendant ainsi le contenu plus facile à lire. En HTML, la taille du texte peut être définie à l'aide de CSS (Cascading Style Sheets). Voici quelques paramètres courants de taille de texte CSS.

1. Utilisez des unités absolues

Les unités absolues en CSS incluent les pixels (px), les points (pt), les pouces (in), les centimètres (cm), etc. Vous pouvez utiliser ces unités pour spécifier des valeurs de pixels spécifiques ou des dimensions réelles lors de la définition de la taille du texte.

Par exemple, vous pouvez utiliser le code suivant pour définir la taille du texte du paragraphe à 16 pixels :

p {
font-size : 16px;
}

De cette façon, tous les paragraphes seront affichés à 16 pixels.

Si vous souhaitez définir la taille du texte à la taille réelle, vous pouvez utiliser des pouces, des centimètres, etc. Par exemple, le code suivant définit la taille du texte du paragraphe sur 2 pouces :

p {
font-size: 2in;
}

Il convient de noter ici que lors de la définition de la taille du texte en utilisant les unités de taille réelle, elle sera affectée par la résolution de l’écran et la taille de l’appareil. Par conséquent, la taille du texte peut varier selon les appareils.

2. Utiliser des unités relatives

En plus des unités absolues, CSS prend également en charge les unités relatives. La taille des unités relatives est relative à la taille de l'élément parent. Les unités relatives courantes incluent em, rem, %, etc.

1. em

em est une unité relative permettant de définir la taille du texte par rapport à la taille de la police de l'élément actuel. Par exemple, le code suivant définit la taille de police du paragraphe à 1,5 fois la taille de police de l'élément parent :

p {

font-size: 1.5em;

}

Si la taille de police de l'élément parent est de 16 pixels, la taille de police du paragraphe sera de 24 pixels (16 *1.5).

2. rem

rem est une unité relative permettant de définir la taille du texte par rapport à la taille de la police de l'élément racine (c'est-à-dire l'élément html). Par exemple :

html {
font-size : 16px;
}

Sur cette base, le code suivant définit la taille de police du paragraphe à 1,5 fois la taille de police de l'élément racine :

p {
font-size : 1.5rem ;
}

Si la taille de police de l'élément racine est de 16 pixels, la taille de police du paragraphe sera de 24 pixels (16*1,5).

Comparé à em, rem est plus pratique car il n'est pas affecté par la taille de la police de l'élément parent, mais est calculé par rapport à l'élément racine de la page entière.

3. %

% est également une unité relative permettant de définir la taille du texte par rapport à la taille de l'élément parent. Par exemple, le code suivant définit la taille de police du paragraphe à 150 % de la taille de police de l'élément parent :

p {
font-size : 150%;
}

Si la taille de police de l'élément parent est de 16 pixels, alors la taille de police du paragraphe sera de 24 pixels (16*1,5).

3. Utiliser des mots-clés

En plus des unités de taille spécifiques, CSS prend également en charge certains mots-clés pour définir la taille du texte. Les mots-clés couramment utilisés incluent petit, moyen et grand.

Par exemple, le code suivant définit la taille du texte du paragraphe sur moyenne :

p {
font-size: medium;
}

De cette façon, la taille du texte du paragraphe sera redimensionnée en fonction des paramètres par défaut du navigateur.

4. Résumé

Dans la conception Web, la taille du texte est l'un des éléments très importants. CSS peut être utilisé pour définir du texte dans différentes tailles en fonction des exigences de conception. Vous pouvez le définir en utilisant les pixels, la taille réelle, les em, rem, %, les mots-clés, etc., et choisir en fonction de la situation spécifique.

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!