CSS 动态加载字体

在本文中，我们将介绍如何在CSS中动态加载字体，并提供相应的示例说明。

阅读更多：CSS 教程

为什么要动态加载字体？

在CSS中使用自定义字体，可以为网页增添个性化和独特的设计效果。而动态加载字体则可以进一步提升网页性能和用户体验。相比于静态加载所有字体文件，动态加载只在需要时加载特定的字体文件，减少了不必要的网络请求和资源占用。特别是对于字体文件比较大的网页，动态加载字体可以极大地优化页面加载速度。

如何动态加载字体？

要在CSS中动态加载字体，我们需要使用@font-face规则，并结合font-display属性来控制字体的加载方式。

首先，我们需要在CSS中定义@font-face规则，并指定字体的名称、字体文件的URL以及字体文件的格式。例如：

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

上述示例中，我们定义了一个名为CustomFont的字体，它的字体文件URL分别为font.woff2和font.woff，并分别指定了字体文件的格式。

接下来，我们可以在需要使用自定义字体的地方，通过font-family属性来引用这个字体。例如：

body {
  font-family: 'CustomFont', sans-serif;
}

上述示例中，我们将CustomFont字体应用于body元素，如果字体文件已经在页面加载时被下载到客户端，字体将被正常应用。否则，将使用浏览器默认的sans-serif字体作为替代。

为了控制字体的加载方式，我们可以使用font-display属性。该属性用于指定字体在加载过程中的显示行为。常用的取值有：

auto：默认值，字体将按照浏览器默认的方式加载和显示。
block：在字体加载完毕前，将使用一个类似于占位符的字体展示文字。加载完毕后，字体将被替换为自定义字体。
swap：同样会先使用占位符字体展示文字，但一旦自定义字体下载完毕，立即替换。
fallback：先使用系统字体展示文字，自定义字体下载完毕后再替换。

示例如下：

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

通过font-display属性，我们可以灵活地控制字体的加载方式，例如在用户首次访问网页时优先加载系统字体以提高加载速度，然后再异步加载自定义字体，从而提供更好的用户体验。

示例

下面的示例演示了如何通过动态加载字体，为页面的标题和内容设置不同的字体。

<!DOCTYPE html>
<html>
  <head>
    <style>
      @font-face {
        font-family: 'CustomFont';
        src: url('font.woff2') format('woff2'),
             url('font.woff') format('woff');
        font-display: block;
      }

      h1 {
        font-family: 'CustomFont', sans-serif;
        color: blue;
      }

      p {
        font-family: 'CustomFont', serif;
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>这是一个自定义字体标题</h1>
    <p>这是一个自定义字体段落。</p>
  </body>
</html>

在上述示例中，我们首先定义了一个名为CustomFont的字体，并指定了字体文件的URL和格式，并设置font-display属性为block。然后，在h1和p元素中分别应用这个字体，并设置不同的颜色。