集成 Google 字体

将 Google 字体添加到您的站点设置,以便在您的 Webflow 站点上使用它们。

您可以选择使用以下方式直接在您的网站上添加其他字体: 字体 样式面板中的选择。选择 包括字体,这将引导你 站点配置 > 字体 选项卡。从那里,您可以将 Google 字体嵌入到您的网站。

如果您希望使用自定义字体或 Adobe 字体,您可以从其各自的部分将其集成到您的网站中 站点配置 > 字体 标签。

有价值的信息: 无需高级站点或工作区计划即可使用 Google 字体。

关键点: Webflow 与 Google 字体的集成依赖于 Google 字体 API,该 API 将最终用户 IP 地址传输到 Google 服务器,可能不符合 GDPR 规定。 了解有关 Google 字体隐私和数据收集的更多信息.

为了避免将最终用户 IP 地址传输到 Google 服务器,我们建议从 Google 下载字体并上传到 站点配置 > 字体 标签 > 自定义字体. 进一步了解如何上传自定义字体。

在本教程中,您将了解:

  1. 如何查找 Google 字体
  2. 如何将 Google 字体插入到您的网站
  3. 如何从您的网站中删除 Google 字体
  4. 如何验证您的网站是否加载了 Google Typefaces API

如何查找 Google 字体

如果你想在做出决定之前探索 Google 字体选择, 访问 Google 字体 实时预览 Google 的免费网络字体。

在那里,您可以筛选字体类别并测试字体的显示方式,以便在将字体集成到您的 Webflow 网站之前更好地了解字体在各种大小和样式下的外观。

如何将 Google 字体插入到您的网站

一旦您选定了字体,您就可以将它们添加到您的 Webflow 网站:

  1. 使用权 站点配置 > 字体 标签 > Google 字体 
  2. 选择您想要在网站上应用的字体 
  3. 选择您打算在网站上包含的变体(例如样式、粗体等)、语言和书写系统——请记住,您可以稍后进行修改 
  4. 点击 插入字体

您上传的字体将可用于 样式面板 > 排版 > 字体 下次重新加载设计器时。如果您已经在设计器中,则刷新页面后即可访问上传的字体。

字体 下拉菜单根据字体来源(例如 Google 字体、自定义字体、Web 字体)组织字体,并按每个来源的字母顺序排列字体。您通过 Google 字体集成集成到网站中的任何字体都将列在 Google 字体,与设计器中的默认 Google 字体(例如 Lato、Varela 等)一起。

有价值的信息: 设计器中的默认 Google 字体(例如 Lato、Varela 等)不会显示在 站点配置 > 字体 标签 > Google 字体

如何从您的网站删除 Google 字体

要从您的网站中删除 Google 字体,您必须首先检测该 Google 字体的所有出现情况,从您的网站中删除 Google 字体的所有实例,并最终从 站点配置 > 字体 标签 > Google 字体.

关键点: 删除 Google 字体 站点配置 > 字体 标签 > Google 字体 独自的 将不会 从您的网站中删除该字体。Google 字体将继续出现在您网站已发布的 CSS 中,并继续加载 Google 字体 API 脚本,直到您从网站中删除 Google 字体的所有实例。任何引用已删除字体的文本元素都将在已发布的网站上呈现为 Times New Roman。 

要精确定位您网站上所有出现的 Google 字体,请打开 样式选择器面板 并输入您想要查找的字体名称。这将提供您网站上使用该 Google 字体的所有类和 HTML 标签的列表。您可以单击每个类旁边的“列表”符号来查看使用该类的元素和组件。

一旦你确定了使用 Google 字体的类和/或 HTML 标签,你需要删除使用该字体的元素,并整理它们在 样式选择器面板或修改这些类和/或 HTML 标签使用的字体 样式面板 >排版 > 字体.

从您的网站中删除 Google 字体的所有实例后,您可以从站点配置中删除 Google 字体:

  1. 使用权 站点配置 > 字体 标签 > Google 字体 
  2. 点击 擦除 您希望从网站中删除的 Google 字体旁边
  3. 重新发布您的网站以实施更改 

如何验证您的网站是否加载了 Google Typefaces API 

删除所有 Google 字体后,您可能需要确认您的网站不再加载 Google 字体 API。如果您希望保证符合 GDPR 规定,这一点尤为重要。

要检查您的网站是否在 Google Chrome 中加载 Google Typefaces API:

  1. 访问您发布的网站 
  2. 右键单击页面上的任意位置并选择“检查” 
  3. 访问 网络 标签
  4. 刷新页面
  5. 检查 网络 选项卡来定位 webfont.js 文件 
Google Chrome 中的网站 justadoginabalaclava.com。右键菜单已打开,并且“检查”选项已突出显示。

如果你能发现 webfont.js 文件,则您的网站已加载 Google 字体 API 脚本,您需要重复上述步骤,从您的网站中删除所有 Google 字体。如果您没有遇到 webfonts.js 文件在“网络”选项卡中,您的网站未请求或加载 Google 字体 API。 

在 Google Chrome 中打开开发者工具,打开 justadoginabalaclava.com。开发者工具的“网络”选项卡中突出显示了文件“webfont.js”。
麦宜云
Ewan Mak 的最新帖子 (查看全部)