CSS 字体

在本教程中，您将学习如何使用 CSS 在网页上设置字体样式。

使用 CSS 设置字体样式

选择正确的字体和样式对于页面上文本的可读性非常重要。

CSS 提供了几个属性来设置文本字体的样式，包括更改字体、控制字体大小和粗体、管理变体等等。

字体属性为： font-family, font-style, font-weight, font-size, and font-variant.

让我们更详细地一一讨论这些字体属性。

字体系列

font-family 属性用于指定用于呈现文本的字体。

此属性可以保存多个逗号分隔的字体名称作为 fallback 系统，因此如果第一种字体在用户系统上不可用，浏览器会尝试使用第二种字体，依此类推。

因此，首先列出您想要的字体，然后列出可能填充的任何字体（如果它不可用）。 您应该以五个通用字体系列结束列表。serif, sans-serif, monospace, cursive and fantasy。 典型的字体系列声明可能如下所示：

body {
    font-family: Arial, Helvetica, sans-serif;
}

网页设计中最常用的字体系列是 serif 和 sans-serif，因为它们更适合阅读。 monospace 字体通常用于显示代码，因为在这种字体中，每个字母占用相同的空间，看起来就像打字文本。

cursive 字体看起来像草书或手写。 fantasy 字体代表艺术字体，但由于跨操作系统的可用性较差，它们没有被广泛使用。

Serif 和 Sans-serif 字体的区别

Serif 字体在字符的末端有小线条或笔划，而 sans-serif 字体更直，没有这些小笔划。 请参见下图。

要了解常用的字体组合，请查看网络安全字体上的参考。

字体样式

font-style 属性用于设置元素文本内容的字体样式。

字体样式可以是normal、italic 或oblique。 默认值为正常。

让我们试试下面的例子来了解它的基本工作原理：

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

字体大小

font-size 属性用于设置元素文本内容的字体大小。

有几种方法可以指定字体大小值，例如 带有关键字、百分比、像素、ems等。

用像素设置字体大小

当您需要像素精度时，以像素值（例如 14px、16px 等）设置字体大小是一个不错的选择。 像素是一个绝对的度量单位，它指定了一个固定的长度。

让我们试试下面的例子来了解它的基本工作原理：

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

以像素为单位定义字体大小被认为不是很容易访问，因为用户无法从浏览器设置中更改字体大小。 例如，视力有限或视力不佳的用户可能希望将字体大小设置为远大于您指定的大小。

因此，如果要创建包容性设计，则应避免使用像素值，而应使用与用户默认字体大小相关的值。

使用 EM 设置字体大小

em 单位是指父元素的字体大小。 在定义font-size 属性时，1em 等于应用于元素的父元素 的字体大小。

所以，如果你在 body 元素上设置 font-size 为 20px，那么 1em = 20px and 2em = 40px。

但是，如果您没有在页面的任何位置设置字体大小，则它是浏览器的默认值，通常为 16 像素。 因此，默认情况下 1em = 16px, 和 2em = 32px。

让我们看一下以下示例，以了解其基本工作原理：

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

使用百分比和 EM 的组合

正如您在上面的示例中所观察到的，em 值的计算看起来并不简单。 为了简化这一点，一种流行的技术是将 body 元素的 font-size 设置为 62.5%（即默认 16px 的 62.5%），相当于 10px ，或 0.625em。

现在，您可以使用 em 单位为任何元素设置 font-size，通过将 px 值除以 10 进行易于记忆的转换。这样 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em，依此类推。 让我们看一下下面的例子：

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

使用根 EM 设置字体大小

为了让事情变得更简单，CSS3 引入了 rem 单元（"root em"的缩写），它始终与根元素 (html) 的字体大小相关，而不管元素在文档中的位置（不像 em，它是 相对于父元素的字体大小）。

这意味着 1rem 相当于 html 元素的字体大小，在大多数浏览器中默认为 16px。 让我们尝试一个示例来了解它的实际工作原理：

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

使用关键字设置字体大小

CSS 提供了几个可用于定义字体大小的关键字。

可以使用以下关键字之一指定绝对字体大小：xx-small, x-small, small, medium, large, x-large, xx-large。 然而，可以使用关键字指定相对字体大小：smaller 或 larger。 让我们尝试一个示例，看看它是如何工作的：

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

使用视口单位设置字体大小

可以使用 vw 或 vh 等视口单位指定字体大小。

视口单位是指浏览器视口尺寸的百分比，其中 1vw = 视口宽度的 1%，而 1vh = 视口高度的 1%。 因此，如果视口为 1600px 宽，则 1vw 为 16px。

通过调整浏览器窗口的大小来尝试以下示例，看看它是如何工作的：

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

但是，视口单元存在问题。 在小屏幕上，字体变得非常小以至于难以阅读。 为了防止这种情况，您可以使用 CSS calc() 函数，如下所示：

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

在本例中，即使视口宽度变为 0，字体大小也至少为 1em 或 16px。

您进一步利用 CSS 媒体查询 来创建更好的响应和流畅的排版。

字体粗细

font-weight 属性指定字体的粗细或粗细。

此属性可以采用以下值之一： normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 和 inherit.

• 数值 100-900 指定字体粗细，其中每个数字表示比其前一个更大的粗细。 400 等同于 normal & 700 等同于 bold。
• bolder 和 lighter 值是相对于继承的字体粗细，而其他值如 normal 和 bold 是绝对字体粗细。

让我们尝试一个示例来了解此属性的基本工作原理：

p {
    font-weight: bold;
}

字体变体

font-variant 属性允许文本以特殊的小型大写字母变体显示。

小型大写字母或小型大写字母与普通大写字母略有不同，其中小写字母显示为相应大写字母的较小版本。

尝试以下示例以了解此属性的实际工作原理：

p {
    font-variant: small-caps;
}

normal 值会从已经以这种方式格式化的文本中删除小型大写字母。