Quelle propriété est utilisée comme raccourci pour spécifier de nombreuses autres propriétés de police en CSS ?-tutoriel CSS-php.cn

Quelle propriété est utilisée comme raccourci pour spécifier de nombreuses autres propriétés de police en CSS ?

王林

Libérer： 2023-09-15 11:25:02

avant

1044 Les gens l'ont consulté

哪个属性用作简写来指定 CSS 中的许多其他字体属性？

Les développeurs peuvent personnaliser les polices des pages Web à l'aide de diverses propriétés CSS. Par exemple, la propriété "font-size" est utilisée pour spécifier la taille de la police et la propriété CSS "font-weight" est utilisée pour spécifier l'épaisseur de la police du texte. De plus, nous pouvons utiliser de nombreuses autres propriétés CSS pour personnaliser la police.

La propriété CSS "font" peut être utilisée comme raccourci pour toutes les propriétés permettant de personnaliser la police.

Grammaire

Les utilisateurs peuvent utiliser la propriété CSS raccourcie "font" pour personnaliser la police d'une page Web selon la syntaxe suivante.

font: font-style font-weight font-size/line-height font-family;

Copier après la connexion

Valeur

font-style ——Spécifiez le style de police, tel que italique, souligné, etc.
font-weight – Spécifiez le poids de la police. Il peut prendre la forme de chiffres « gras », « normaux », etc.
font-size – utilisé pour spécifier la taille de la police.
line-height – Spécifie la hauteur de ligne du texte.
font-family – Il spécifie la famille de polices.

Exemple

Dans l'exemple ci-dessous, l'élément HTML

contient du texte que nous avons personnalisé à l'aide de diverses propriétés CSS. Nous utilisons la propriété CSS 'font-size' pour spécifier la taille de la police, la propriété CSS 'font-weight' pour spécifier l'épaisseur de la police, 'font-family' pour spécifier le type de police et 'font-style' pour spécifier le taille de la police. Spécifie le style de police et l'attribut 'line-height' spécifie la hauteur de ligne du texte.

Dans la sortie, les utilisateurs peuvent observer des polices personnalisées.

<html>
<head>
   <style>
      .text {
         font-size: 13px;
         font-weight: bold;
         font-family: Arial;
         font-style: italic;
         line-height: 3.6;
         width: 100px;
      }
   </style>
</head>
<body>
   <h3> Using the different <i> font properties </i> to customize the fonts in CSS </h3>
   <p class = "text">
      This font is customized with various CSS properties.
   </p>
</body>
</html>

Copier après la connexion

Exemple

Dans l'exemple ci-dessous, nous utilisons une seule propriété CSS « font » pour personnaliser la police, au lieu d'utiliser 5 propriétés différentes comme dans l'exemple ci-dessus.

Dans le résultat, l'utilisateur peut constater qu'il donne à la police le même style que le premier exemple.

<html>
<head>
   <style>
      .text {
         font: italic 800 1.2rem/2.5 Arial;
         width: 100px;
      }
   </style>
</head>
<body>
   <h2> Using the font CSS property to customize the fonts in CSS </h2>
   <p class = "text">
      This font is customized with the CSS 'font' property.
   </p>
</body>
</html>

Copier après la connexion

Conclusion

Les utilisateurs ont appris à utiliser la propriété CSS abrégée "font" au lieu d'utiliser le nombre de propriétés CSS pour personnaliser les polices. C'est également une bonne pratique d'utiliser des propriétés CSS abrégées pour améliorer la lisibilité et réduire la complexité de votre code.

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!