CSS 网页字体何时加载以及如何预加载

在本文中，我们将介绍网页字体的加载时机以及预加载的方法。字体在网页设计中起着重要的角色，可以提升用户体验和页面的视觉吸引力。然而，由于字体文件的大小和网络连接的速度等因素，字体加载可能成为页面加载速度的瓶颈之一。了解字体加载的时机，并采取预加载的措施，可以优化网页性能和用户体验。

阅读更多：CSS 教程

字体加载时机

在了解如何预加载字体之前，我们首先需要了解字体加载的时机。通常情况下，网页字体可以在以下几种时机进行加载：

页面首次加载：当用户打开一个网页时，浏览器会解析网页的HTML和CSS，并开始加载字体文件。字体文件可以通过CSS的@font-face规则指定，并使用url()函数指定字体文件的路径。在首次加载时，浏览器会根据CSS中字体的使用情况，决定是否加载字体文件。

示例：

@font-face {
  font-family: 'MyFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
}

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

动态加载：在某些情况下，字体可能在页面加载完毕后再进行加载。例如，当通过JavaScript或CSS动态地添加文本内容时，字体文件可能需要在添加内容后进行加载。这可以通过在动态添加的元素中指定字体样式来实现。

示例：

var element = document.createElement('div');
element.textContent = 'Dynamic text';
element.style.fontFamily = 'MyFont';
document.body.appendChild(element);

延迟加载：为了优化页面加载性能，在页面首次加载时可以延迟加载字体文件。这可以通过使用font-display属性来控制字体的加载行为。font-display有多个值可选，分别决定是否等待字体加载完毕再显示文本内容，或者在字体加载过程中显示备用字体。

示例：

@font-face {
  font-family: 'MyFont';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff');
  font-display: swap; /* or other options like block, fallback, optional */
}

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

需要注意的是，字体文件的加载可能会产生额外的网络请求，因此在使用字体时应该权衡字体的视觉效果和页面性能。

字体预加载

为了避免字体加载带来的延迟和视觉闪烁，我们可以采取预加载的措施。字体预加载允许我们在字体需要使用之前提前加载字体文件，以确保字体在用到时能够立即显示。

要实现字体的预加载，我们可以使用以下方法之一：

使用rel="preload"属性：在HTML的<link>标签中，我们可以添加rel="preload"属性来预加载字体文件。通过指定as="font"，我们告诉浏览器这是一个字体文件需要预加载。这样，字体文件就会在页面加载时被优先加载，以便在字体使用之前提前下载完成。

示例：

<link rel="preload" href="path/to/font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="path/to/font.woff" as="font" type="font/woff" crossorigin="anonymous">

使用<style>标签：我们可以使用JavaScript动态地创建<style>标签，并将字体文件以@font-face规则的形式插入其中。然后，将<style>标签插入到文档的头部，这样字体文件就会在其他CSS样式解析之前进行加载。通过使用@font-face规则，我们可以指定字体文件的路径和名称等信息。

示例：

var style = document.createElement('style');
style.textContent = `
  @font-face {
    font-family: 'MyFont';
    src: url('path/to/font.woff2') format('woff2'),
         url('path/to/font.woff') format('woff');
  }
`;
document.head.appendChild(style);