CSS 如果在@font-face中列出多个来源，那么它们是否都在客户端上加载

在本文中，我们将介绍在CSS中使用@font-face加载字体时，如果在@font-face中列出了多个来源，是否所有的来源都会在客户端上加载。

阅读更多：CSS 教程

@font-face的基本用法

在CSS中，可以使用@font-face规则来定义自定义字体。@font-face规则允许网页设计师使用非标准的字体来渲染网页上的文本，而无需依赖用户计算机上已安装的字体。

下面是一个使用@font-face加载字体的基本示例：

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff') format('woff'),
       url('font.ttf') format('truetype');
}

在这个示例中，我们定义了一个名为’CustomFont’的字体，并指定了两个不同格式的字体文件作为字体的来源。

多个来源的情况

当在@font-face中列出多个来源时，浏览器将按照所列出的顺序尝试加载字体文件，直到成功加载为止。如果前一个来源无法加载成功，浏览器将继续尝试后面的来源，直到找到可以成功加载的字体文件。

比如，我们可以使用以下代码来定义一个包含多个来源的字体：

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff'),
       url('font.ttf') format('truetype');
}

在这个示例中，首先浏览器将尝试加载’font.woff2’字体文件，如果加载失败，则尝试加载’font.woff’字体文件，并最后尝试加载’font.ttf’字体文件。

字体格式的选择和兼容性

在使用@font-face加载字体时，需要注意选择合适的字体格式，并考虑兼容性问题。

不同的浏览器和操作系统对字体格式的支持程度可能有所不同。常见的字体格式包括WOFF（Web Open Font Format）、WOFF2（Web Open Font Format 2.0）和TTF（TrueType Font）等。

为了确保在各种浏览器和操作系统上都能正确加载字体，建议提供多种字体格式的来源。

以下是一个兼容性较好的示例：

@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2'),
       url('font.woff') format('woff'),
       url('font.ttf') format('truetype');
}

在这个示例中，我们提供了WOFF2、WOFF和TTF三种字体格式的来源，以便在各种浏览器和操作系统上都能够正常加载字体。