CSS字体的详细介绍

在网络诞生之初，你只有少数几种字体可以选择。

值得庆幸的是，今天你可以在你的网页上加载任何种类的字体。

多年来，CSS在字体方面获得了许多不错的功能。

font 属性是许多属性的缩写。

• font-family
• font-weight
• font-stretch
• font-style
• font-size

让我们来看看它们中的每一个，然后我们将介绍font 。

然后我们将讨论如何加载自定义字体，使用@import 或@font-face ，或通过加载字体样式表。

font-family

设置该元素将使用的字体家族。

为什么是 "家族"？因为我们所知道的字体实际上是由几个子字体组成的，它们提供了我们所需要的所有样式（粗体、斜体、淡体......）。

这里有一个来自我的Mac的Font Book应用程序的例子--Fira Code字体家族下面承载着几种专用字体。

比如说，这个属性可以让你选择一种特定的字体。

body {
  font-family: Helvetica;
}

你可以设置多个值，因此，如果第一个值由于某种原因不能使用（例如，在机器上找不到，或者下载字体的网络连接失败），就会使用第二个选项。

body {
  font-family: Helvetica, Arial;
}

到目前为止，我使用了一些特定的字体，这些字体我们称之为网络安全字体，因为它们被预装在不同的操作系统中。

我们把它们分为有衬线字体、无衬线字体和单色字体。下面是一些最受欢迎的字体的列表。

有衬线字体

• 乔治亚
• 帕拉蒂诺
• Times New Roman
• 泰晤士报

无衬线字体

• Arial
• Helvetica
• 梵蒂冈
• 日内瓦
• 塔霍马
• Lucida Grande
• 影响
• Trebuchet MS
• Arial Black

单一空间

• 新信使
• 信使级
• Lucida Console
• 摩纳哥

你可以将所有这些作为font-family ，但不能保证每个系统都有这些属性。其他的也存在，支持程度不一。

你也可以使用通用名称。

• sans-serif 不含连字的字体
• serif 一种带有连接符的字体
• monospace 一种特别适合编码的字体
• cursive 用来模拟手写作品的字体
• fantasy 名字说明一切

这些通常用在一个font-family 定义的末尾，以提供一个后备值，以防其他东西无法应用。

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

font-weight

这个属性设置了字体的宽度。你可以使用那些预定义的值。

• 正常
• 粗体
• 加粗（相对于父元素）
• 更轻（相对于父元素）

或者使用数字关键字

• 100
• 200
• 300
• 400，映射到normal
• 500
• 600
• 700，映射到bold
• 800
• 900

其中100是最浅的字体，而900是最粗的字体。

其中有些数值可能没有映射到字体上，因为字体家族中必须提供这个数值。当缺少一个时，CSS会让这个数字至少和前面的数字一样粗，所以你可能会有一些数字指向同一个字体。

font-stretch

如果有的话，允许选择字体的窄面或宽面。

这很重要：字体必须配备不同的面。

允许的值是，从窄到宽。

• ultra-condensed

• extra-condensed

• condensed

• semi-condensed

• normal

• semi-expanded

• expanded

• extra-expanded

• ultra-expanded

font-style

允许你对字体应用斜体风格。

p {
  font-style: italic;
}

这个属性也允许值oblique 和normal 。在使用italic 和oblique 之间几乎没有什么区别，如果有的话。对我来说，第一个更容易，因为HTML已经提供了一个i 元素，它意味着斜体。

font-size

这个属性是用来决定字体的大小的。

你可以传递2种值。

1. 一个长度值，如px,em,rem 等，或一个百分比
2. 一个预定义的值关键词

在第二种情况下，你可以使用的值是。

• xx-small
• x-small
• 小
• 中
• 大
• x-大
• xx-大
• 较小（相对于父元素）
• 大（相对于父元素）

用法。

p {
  font-size: 20px;
}

li {
  font-size: medium;
}

font-variant

这个属性最初是用来将文本改为小写的，它只有3个有效值。

• normal
• inherit
• small-caps

小写意味着文本在其大写字母旁边以 "小写 "呈现。

font

font 属性可以让你在一个中应用不同的字体属性，减少杂乱。

我们必须至少设置2个属性，font-size 和font-family ，其他的是可选的。

body {
  font: 20px Helvetica;
}

如果我们添加其他属性，需要把它们放在正确的顺序中。

这就是顺序。

font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;

例子。

body {
  font: italic bold 20px Helvetica;
}

section {
  font: small-caps bold 20px Helvetica;
}

加载自定义字体时使用@font-face

@font-face 让你添加一个新的字体家族名称，并将其映射到一个存放字体的文件。

这个字体将被浏览器下载，并在页面中使用，这对网络上的排版来说是一个如此根本的改变--我们现在可以使用任何我们想要的字体。

我们可以在我们的CSS中直接添加@font-face 声明，或者链接到一个专门用于导入字体的CSS。

在我们的CSS文件中，我们也可以使用@import 来加载该CSS文件。

一个@font-face 声明包含了几个我们用来定义字体的属性，包括src ，即字体的URI（一个或多个URI）。这遵循同源政策，这意味着字体只能从当前的源头（域+端口+协议）下载。

字体的格式通常为

• woff (网络开放字体格式)
• woff2 (网络开放字体格式2.0)
• eot (嵌入式开放字体)
• otf (OpenType字体)
• ttf (TrueType字体)

下面的属性允许我们定义我们要加载的字体的属性，就像我们上面看到的那样。

• font-family
• font-weight
• font-style
• font-stretch

关于性能的说明

当然，加载字体对性能有影响，你在创建页面设计时必须考虑到这一点。