Comment définir la police en utilisant CSS

CSS est la partie la plus importante de la conception Web. Il permet aux pages Web de présenter différents styles et mises en page. L'une des propriétés CSS les plus élémentaires est la police, qui est la propriété font. En définissant la police, nous pouvons contrôler la taille, la couleur, la police et d'autres attributs associés du texte dans la page Web.

Voici quelques conseils et points de connaissances sur la façon de définir la police, qui peuvent vous aider à mieux maîtriser cette propriété CSS couramment utilisée.

1. Paramètre de la taille de la police

En CSS, l'attribut font-size est généralement utilisé pour définir la taille du texte. Sa valeur peut être un pixel (px), un pourcentage (%), em, rem, etc. De manière générale, les pixels, en tant qu'unités absolues de longueur, conviennent mieux aux mises en page de taille fixe. Par exemple, vous pouvez définir la taille de police de l'élément h1 sur 36 pixels :

h1 {

font-size: 36px;

}

tandis que les pourcentages et em, etc. conviennent mieux aux sites Web avec des unités de longueur relative et des conceptions évolutives. Par exemple, vous pouvez définir la taille de police d'un élément de paragraphe à 1,2 fois :

p {

font-size: 120%;

}

2. Paramètres de police

En plus de la taille de police, la police (font-family) est un autre attribut important. En définissant font-family, nous pouvons modifier la police par défaut du texte. En règle générale, plusieurs polices peuvent être utilisées sur une page Web. Par conséquent, lors de la définition des attributs de police, vous pouvez séparer plusieurs polices par des virgules pour garantir que les visiteurs peuvent afficher correctement les polices sur la page Web. Par exemple :

body {

font-family: "Microsoft YaHei", "SimHei", "Helvetica Neue", Helvetica, Arial, sans-serif;

}

Dans cet exemple, si la première police "Microsoft YaHei" n'est pas disponible sur l'ordinateur du visiteur, d'autres polices seront essayées en séquence jusqu'à ce que la page Web soit rendue correctement.

3. Paramètres gras et italique

L'attribut font-weight peut être utilisé pour définir l'épaisseur de la police. Sa valeur peut être normale (par défaut), gras (gras), plus gras (plus gras), plus clair (plus clair), 100-900 (plus le nombre est grand, plus la police est grasse), etc.

Par exemple, pour mettre en gras la police de l'élément h2 :

h2 {

font-weight: bold;

}

L'attribut font-style peut être utilisé pour définir si le texte apparaît en italique. Sa valeur peut être normale (par défaut), italique (italique), oblique (inclinaison) etc.

Par exemple, définissez un morceau de texte en italique :

p {

font-style: italic;

}

4. Réglage de la hauteur de ligne

La hauteur de ligne fait référence à la distance verticale entre les lignes de texte. La valeur par défaut est normale, qui est spécifié par la police elle-même. En définissant la propriété line-height, nous pouvons contrôler la distance entre les lignes, affectant ainsi l'effet global de mise en page du paragraphe.

Par exemple, définissez la hauteur de ligne de l'élément h3 à 1,6 fois :

h3 {

line-height: 1.6;

}

En bref, en maîtrisant soigneusement l'attribut font, nous pouvons facilement ajuster la taille, la couleur, la police, l'épaisseur et ligne de la police et d'autres aspects pour créer un effet de conception Web magnifique et unique.

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!