如何使用Google Fonts和font-display

在本教程中，我们将探索如何使用Google Fonts和font-display属性。

Google Fonts是一个免费的开源平台，提供了一个庞大的网络字体库。作为前端开发者，将这些字体应用到你的项目中对于在不同设备上创建视觉上吸引人且一致的设计至关重要。在有效地使用Google Fonts方面，理解font-display属性是至关重要的，该属性确定了在加载过程中如何渲染字体。

我们将涵盖以下主题：

什么是Google Fonts？ 什么是font-display属性？ 如何将Google Fonts添加到你的项目中 链接Google Fonts 导入Google Fonts 理解不同的font-display取值 Auto（自动） Block（阻塞） Swap（交换） Fallback（回退） Optional（可选） 使用Google Fonts实现font-display属性 使用链接方法 使用@import方法 解决常见问题 问题：自定义字体未加载或显示 问题：闪烁的不可见文本（FOIT）或闪烁的未样式化文本（FOUT） 问题：不同浏览器中字体呈现不一致

什么是Google Fonts？

Google Fonts是由Google提供的一套包含超过1,000个免费许可字体家族的库。这些字体可以轻松地嵌入到你的网站中，以创建独特、专业和一致的外观。Google Fonts经过优化，具有良好的性能和可访问性，非常适合用于网页开发。

什么是font-display属性？

font-display属性是CSS的一项功能，用于控制在加载过程中字体的渲染行为。它决定了浏览器在显示回退字体或带有不可见字符的文本之前应等待字体加载的时间。通过使用font-display属性，你可以通过减少字体加载缓慢对网站设计和性能的影响，优化用户体验。

如何将Google Fonts添加到你的项目中

有两种主要方法可以将Google Fonts添加到你的项目中：链接和导入。

链接Google Fonts

链接是将Google Fonts添加到项目中最常用的方法。要使用此方法，请按照以下步骤进行操作：

访问Google Fonts网站。 浏览或搜索你想要使用的字体。 点击字体以打开其详细信息页面。 通过点击复选框或使用滑块来选择所需的字体样式和粗细。 点击“选择此样式”按钮，将所选的字体样式添加到你的集合中。 打开“嵌入”选项卡，你将看到一个链接标签，可以将其添加到HTML文件的head部分中。 例如，要添加“Roboto”字体，链接标签将如下所示：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

导入Google Fonts

另一种方法是使用CSS文件中的@import规则导入Google Fonts。要使用此方法，请按照以下步骤进行操作：

按照链接方法的步骤1-5进行操作。 在嵌入选项卡中，切换到@import选项卡。 复制提供的代码片段，并将其粘贴到CSS文件的顶部。 例如，要导入“Roboto”字体，@import规则将如下所示：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

理解不同的font-display取值

font-display属性有五个可能的取值，每个取值具有不同的渲染行为：

auto（自动） block（阻塞） swap（交换） fallback（回退） optional（可选）

Auto（自动）

auto值将字体的渲染行为交由浏览器的默认设置决定。这个选项可能导致在不同浏览器上的渲染不一致：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

font-display: auto;

Block（阻塞）

block值指示浏览器在开始时隐藏文本，并等待字体加载。如果字体在短时间内未加载完成，浏览器将显示回退字体。一旦自定义字体加载完成，浏览器将切换文本以使用自定义字体。这种方法可能导致在等待字体加载时出现“闪烁的不可见文本”（FOIT）：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

font-display: block;

Swap（交换）

swap值告诉浏览器立即使用回退字体显示文本，并在自定义字体加载完成后切换到自定义字体。这种方法可能会导致“闪烁的未样式化文本”（FOUT），但确保文本从一开始就对用户可见：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

font-display: swap;

Fallback（回退）

fallback值是block和swap的组合。浏览器最初会短暂隐藏文本（通常约100毫秒）。如果自定义字体在此期间加载完成，浏览器将显示它。否则，它将显示回退字体。经过较长时间（通常约三秒），如果自定义字体仍未加载完成，浏览器将放弃并继续使用回退字体：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

font-display: fallback;

Optional（可选）

optional值类似于fallback，但自定义字体加载的等待时间较短。如果自定义字体在这个较短的时间内（依赖于浏览器）未加载完成，浏览器将放弃并继续使用回退字体。这种方法将用户体验和性能放在优先考虑，而不是完全准确的字体呈现：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

font-display: optional;

在Google Fonts中使用font-display属性的实现方式

Google Fonts允许你直接在链接或@import URL中设置font-display的值。要实现这一点，请按照以下选项之一进行操作。

使用链接方法

按照上面的链接部分的步骤1-6进行操作。

在嵌入选项卡中，找到自定义部分。

在Font-display下拉菜单中，选择所需的font-display取值。

链接标签将会更新为所选的font-display取值。将更新后的链接标签添加到HTML文件的head部分。

例如，要添加“Roboto”字体，并设置font-display为swap：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

使用@import方法

按照上面的导入方法的步骤1-3进行操作。

在嵌入选项卡中，找到自定义部分。

在Font-display下拉菜单中，选择所需的font-display取值。

@import规则将会更新为所选的font-display取值。将更新后的@import规则添加到你的CSS文件中。

例如，要导入“Roboto”字体，并设置font-display为swap：

--javascripttypescriptbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

常见问题的解决方法

以下是在使用Google Fonts和font-display属性时遇到的一些常见问题及其解决方法。

问题：自定义字体未加载或显示

确保你已正确将链接标签或@import规则添加到HTML或CSS文件中。

检查链接或@import代码中是否存在拼写错误或不正确的URL。

验证在CSS规则中是否使用了正确的字体系列名称和粗细。

问题：闪烁的不可见文本（FOIT）或闪烁的未样式化文本（FOUT）

选择一个不同的font-display取值以更好地满足你的需求。例如，如果你遇到了FOIT问题，尝试使用swap或fallback。如果你遇到了FOUT问题，考虑使用block或fallback。

确保你的自定义字体尽早加载在页面加载过程中，将链接标签或@import代码放在head部分或CSS文件的顶部。

通过仅选择所需的字体样式和粗细来优化字体文件大小。

问题：不同浏览器之间的字体呈现不一致

设置特定的font-display取值，而不是使用auto取值，以确保在不同浏览器上的一致行为。

在各种浏览器上测试你的网站，以确定任何呈现问题，并对你的CSS进行必要的调整。 就是这样！