font-display CSS Google Fonts

Google Fonts是一个流行的网站，提供了众多的免费字体可供使用。当我们在网站上使用这些字体时，可以通过CSS来设置它们的加载方式。其中一个关键的CSS属性是font-display，它决定了字体何时显示及如何显示。

什么是font-display?

font-display CSS属性用于指定浏览器在下载字体时的行为。通常来说，字体是延迟获取的，即只有当它们需要被呈现时才会被下载。这种方法的缺点是，如果字体的下载过程受到阻碍，用户将会看到一个空白的等待时间，这会影响用户的体验。font-display属性可以用来解决这个问题。

font-display的取值

font-display属性有五个可能的值，每个值都确定了字体的行为。这些值是：

• auto：默认值，让浏览器根据情况自行决定。
• block：字体将在下载完成之前被阻止。在等待字体下载完成时，文本的备用字体将被呈现。这可以避免FOIT问题（Flash of Invisible Text）。
• swap：与block类似，但在字体下载完成之前，先使用备用字体。这将避免FOIT问题，但可能会影响文本的外观。
• fallback：如果字体不能下载或解析，则使用系统默认字体。这可以避免FOIT问题，同时也是其他字体加载失败的替代方案。
• optional：允许浏览器跳过字体下载，如果字体无法下载，则使用当前字体的替代方案。

Google Fonts中的font-display

默认情况下，使用Google Fonts时，font-display属性设置为了swap。这对于普通的字体加载来说是个不错的选择。

如果您希望使用其他设置，您可以通过在URL中添加参数&display={value}来更改font-display属性。例如，要将字体设置为fallback，可以在URL中添加&display=fallback参数。

示例

以下是示例CSS代码片段，可用于Google Fonts：

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
body {
  font-family: 'Open Sans';
}

在上面的代码片段中，我们导入了Open Sans字体并将font-display设置为了swap。这将让浏览器先使用备用字体，然后再在字体加载完成后用Open Sans字体替换备用字体。