CSS 字体属性font相关的用法

CSS 字体属性是用来设置文本字体的样式和属性的。其中 font 相关的属性有很多，包括字体家族、字体大小、字体样式、字体加粗、字体颜色、行高等等。下面我来一步步讲解如何使用这些属性。

字体家族

字体家族就是我们常说的字体名称，例如宋体、微软雅黑等等。在 CSS 中，我们可以使用 font-family 属性来设置字体家族，如下所示：

body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}

在上面的代码中，我们将字体家族设置为 Microsoft YaHei，如果该字体不存在，则使用 Arial 字体。如果 Arial 字体也不存在，则使用系统默认的 sans-serif 字体。这样做的好处是，我们可以适配不同的设备，确保文本总能呈现出字体样式。

字体大小

字体大小就是指字体的高度大小，通常用像素 (px) 或百分比 (%) 来表示。在 CSS 中，我们可以使用 font-size 属性来设置字体大小，如下所示：

h1 {
  font-size: 2em;
}

在上面的代码中，我们将 <h1> 元素的字体大小设置为相对于父元素的两倍。如果我们将字体大小直接设置为像素值，则是这样的：

p {
  font-size: 16px;
}

在上面的代码中，我们将 <p> 元素的字体大小设置为 16 像素。

字体样式

字体样式用来设置字体的风格，例如斜体、粗体等等。在 CSS 中，我们可以使用 font-style 属性来设置字体样式，如下所示：

em {
  font-style: italic;
}

在上面的代码中，我们将 <em> 元素的字体样式设置为斜体。

字体加粗

字体加粗用来设置字体的粗细程度。在 CSS 中，我们可以使用 font-weight 属性来设置字体加粗，如下所示：

strong {
  font-weight: bold;
}

在上面的代码中，我们将 <strong> 元素的字体加粗设置为加粗的样式。

字体颜色

字体颜色用来设置文本的颜色。在 CSS 中，我们可以使用 color 属性来设置字体颜色，如下所示：

p {
  color: #333;
}

在上面的代码中，我们将 <p> 元素的字体颜色设置为浅灰色。

行高

行高用来设置文本行与行之间的间距。在 CSS 中，我们可以使用 line-height 属性来设置行高，如下所示：

p {
  line-height: 1.5;
}

在上面的代码中，我们将 <p> 元素的行高设置为文本高度的 1.5 倍。

除了上面列举的属性外，还有其他字体属性，如字体变体、字母间距、字体拉伸等等，这里不一一列举。总的来说，字体属性在网页设计中起到了关键的作用，我们需要灵活使用这些属性来达到我们想要的效果。