CSS 使用异步或延迟加载Google字体，无需使用Font Face Observer

在本文中，我们将介绍如何使用CSS中的标签来异步或延迟加载Google字体，而不需要使用Font Face Observer。

阅读更多：CSS 教程

为什么异步加载字体很重要？

在网页上使用自定义字体可以提升用户体验，使网站更具个性化。Google Fonts提供了大量的免费字体供我们选择和使用。然而，同时加载多个字体可能会导致网页加载速度减慢。为了提高网页性能，我们可以异步或延迟加载字体。

异步加载字体

使用标签的rel=”preload”属性可以异步加载字体。这个属性告诉浏览器在加载完关键资源（如HTML、CSS）之后立即加载字体资源，并且不会阻塞页面的渲染和加载。下面是一个示例：

<link rel="preload" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"></noscript>

在上面的示例中，我们使用标签加载了Google Fonts中的Roboto字体。首先，我们通过设置rel=”preload”属性来告诉浏览器该资源需要提前加载。然后，当字体资源加载完成后，将其作为样式表进行渲染。

需要注意的是，由于使用了标签的异步加载，我们需要提供一个标签来作为替代方案。这样，当浏览器没有加载JavaScript时，仍然可以正常加载字体。

延迟加载字体

除了异步加载字体，我们还可以使用defer属性来延迟加载字体。延迟加载意味着浏览器会在文档解析和渲染完毕后再加载字体资源。下面是一个示例：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" defer></script>
<script defer>
  WebFont.load({
    google: {
      families: ['Roboto']
    }
  });
</script>

在上面的示例中，我们首先使用了