CSS 如何一次声明设置所有字体属性

CSS或级联样式表是一种强大的工具，提供了许多用于在网页上对字体进行对齐和定位的属性。字体声明属性是CSS中的众多属性之一。在CSS中，可以使用简写属性一次设置所有字体属性。该属性允许在一行代码中指定字体样式、变体、粗细、大小、行高、家族、文字装饰和文本转换。

在CSS中设置字体属性

CSS提供了各种字体属性来对文本进行样式设置，例如字体家族、字体大小、字体样式、字体粗细、行高、文本装饰、文本转换和字体变体。

CSS字体简写属性的语法

字体简写属性用于在一次声明中设置所有字体属性。字体简写属性的语法如下：

css selector {
   font: font-style font-variant font-weight font-size/line-height font-family;
}

在上述的语法中，

Font-style − 这个属性设置字体的风格，例如正常、斜体或倾斜。
Font-variant − 这个属性设置字体的变种，例如正常或小型大写字母。
Font-weight − 这个属性设置字体的粗细，例如粗体或正常。
Font-size − 这个属性设置字体的大小，以像素、em或其他单位。
Line-height − 这个属性设置行高，即文本行之间的间距。
Font-family − 这个属性设置字体系列，例如Arial，Times New Roman或自定义字体。

使用Font属性设置字体系列

在CSS中，font-family属性用于指定文本的字体系列。这可以是特定的字体名称或通用的字体系列，如sans-serif，serif或monospace。通过在字体声明的末尾添加font-family属性来设置字体系列，我们使用字体简写属性。例如−

body {
   font: normal normal 400 16px/1.5 Arial;
}

在上面的示例中，我们设置了字体族为“Arial”

使用font属性设置字体大小

font-size属性用于指定文本的大小。可以是具体的大小，例如16px，也可以是相对大小，如larger或smaller。通过在字体声明的末尾添加font-size属性来设置字体大小，我们使用font缩写属性。例如 –

body {
   font: normal normal 400 16px/1.5 Arial;
}

在上面的示例中，我们将字体大小设置为“16px”。

使用font属性设置字体样式

font-style属性用于指定文本的样式，如斜体或正常。通过将font-style属性添加到字体声明的开头来设置字体样式，为此我们使用font简写属性。例如 –

body {
   font: italic normal 400 16px/1.5 Arial;
}

在上面的示例中，我们将字体样式设置为“italic”。

使用字体属性设置字重

字体粗细属性（font-weight）用于指定文本的粗细程度，如加粗（bold）或正常（normal）。通过将字体粗细属性添加到字体声明的第三个位置来设置字体粗细，我们可以使用字体的简写属性。

body {
   font: normal normal bold 16px/1.5
}

在上面的示例中，我们将字体的粗细设置为“bold”。

使用字体属性设置行高

line-height属性用于指定文本行之间的间距。行高是通过在字体声明中的字体大小之后添加line-height属性来设置的，为了做到这一点，我们使用字体的快捷属性。它用正斜杠分隔。例如：

body {
   font: normal normal bold 16px/1.5
}

在上面的示例中，我们将行高设置为“1.5”。

使用字体属性设置字体变体

font-variant属性用于指定字体变体，如small-caps或normal。通过在字体声明中在字体样式后添加font-variant属性来设置字体变体，我们使用字体的缩写属性。例如 –

p {
   font: normal small-caps bold 24px/1.5 Arial;
}

在上面的示例中，我们将字体变体设置为”small-caps”。

此外，我们可以使用text-transform属性和text-decoration属性来设置文本转换和文本装饰。

在了解如何使用Font Shorthand属性设置每个字体属性后，现在让我们看一个如何将它们全部结合起来的示例。

示例1

在下面的示例中，我们将字体样式设置为斜体，字体变体设置为小型大写字母，字体粗细设置为粗体，字体大小设置为16像素，行高设置为1.5，字体家族设置为Georgia、serif，文本转换为首字母大写。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font: italic small-caps bold 16px/1.5 Georgia serif capitalize;
      }
   </style>
</head>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <h3>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h3>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
   <div>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
</body>
</html>

示例2

这里是另一个使用CSS一次性设置所有字体属性的示例。

<!DOCTYPE html>
<html>
<head>
   <title>Blur Effect Example</title>
   <style>
      h1 {
         font: normal normal bold 36px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      }
      h2 {
         font: italic normal 400 24px/1.5 "Times New Roman", Times, serif;
      }
      p {
         font: normal normal 400 18px/1.5 "Open Sans", sans-serif;
      }
   </style>
</head>
<body>
   <h1>Welcome to TutorialsPoint</h1>
   <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</body>
</html>