在 WordPress 中使用 Web Fonts API 的旅程对于开发人员来说就像过山车一样。在从 WordPress 5.9 版本中删除后，它被移动到 Project Gutenberg，在那里它可以与依赖它的相关功能一起构建。
此 API 已合并到 Gutenberg 插件中，应该会在 12.8 版本中登陆。想要测试它的主题作者可以克隆插件的开发版本或从 Times Gutenberg 下载夜间构建。
Jono Alderson 打开原票 February 2019 Web Fonts API。但是，它要到 2021 年底才能获得重要的支持和开发。大多数人认为，该 API 看起来已准备好与 WordPress 5.9 一起发布。然而，它被 WordPress 的主要开发人员之一 Andrew Ozz 搁置了。
这不是一个流行的决定，但却可能是最好的方向。 API 是有限的，因为它还没有 theme.json 支持。仅通过 PHP 可用意味着主题作者将大部分时间花在他们一直在做的事情上——推出他们自己的解决方案。这并不是它推出的障碍，但它可能是 API 最常见的用例。
虽然许多人希望在 WordPress 5.9 中看到这个功能，但额外的几个月让它有时间发展成为一个更简洁的 API，可以与网站和内容编辑器集成。
主题作者现在可以在 theme.json 文件中定义字体定义和相应的系列，WordPress 会自动在编辑器和前端加载必要的@font-face CSS。我对此进行了广泛的测试，没有遇到任何问题。
一个潜在的缺点是此功能仅支持本地提供程序，这意味着字体必须与主题捆绑在一起。 Google 字体提供程序是原始实现的一部分，但后来被删除。
Ozzy 在较早的票证中提供了更多详细信息，但他的建议是暂时放弃对 Google 字体的支持：
现在仅添加对本地字体的支持。如果 WordPress 决定在以后包含对 Google CDN 的支持，实施将必须考虑网络隐私法律和限制，与最终用户同意 API 等相关。
相关文章：德国法院因违反 GDPR 使用 Google 托管字体而对网站所有者处以罚款
Web Fonts API 背后的开发人员之一 Ari Stathopoulos 解释说，在核心中捆绑一个直接写入字体文件的解决方案到服务器将改善隐私：
与其删除它，也许我们可以适当地实施它们，强制使用本地托管的网络字体以提高性能和隐私？通过这种方式，我们将树立一个很好的榜样，我们将看到 WP 生态系统在性能和隐私方面的显着改进，因为目前使用 Google 字体、Adobe 字体等的主题和插件将开始采用该 API。
目前官方似乎支持原生字体，但主题和插件作者必须注册自定义提供者。忽略 Google 字体支持的一个问题是，在野外将有许多竞争解决方案，而不是每个人都可以依赖的可靠提供商。越多的开发者自己造轮子，不同的实现就越有可能出现 bug 或安全问题。
Automattic 已经有了针对 Google 提供商 Jetpack 的补丁草案。假设它被拉入插件，它无疑会与注册您自己的 Google Provider ID 的主题发生冲突。
仅支持本地字体也可以创建更大的主题下载大小。对于许多主题，这应该不是问题。一个、两个或三个字体包是合理的。但是，如果全局样式变体变得流行，我们可能会看到包含数十种字体的主题，以涵盖各种预先打包的设计。这将很快导致主题文件膨胀，并结合足够的图像，主题作者可能会达到 10MB 的限制以提交到目录。这感觉有点像明天的问题，但它是今天就应该开始思考的事情。
API 仍有一些问题需要解决。但是，在 WordPress 6.0 发布周期的早期将其推出，将使每个人都有时间进行测试并帮助改进它。
测试捆绑字体
有两种方法可以使用 WordPress 注册网络字体。主题作者最简单的解决方案是通过他们的 theme.json 文件来定义它们。这是我将在下面介绍的方法，因为此文件自 WordPress 5.8 以来一直是标准文件。有一个PHP example pull request ticket。
theme.json的键和值大多对应CSS @font-face规则。如果主题作者使用它已经有一段时间了，则应该刷新它。
为了测试，我通过我的主题注册了三种网络字体，下面的屏幕截图显示了它们在编辑器中的运行情况：
测试三种网页字体。
Web 字体应在 settings.typography.fontFamily 下注册为特定字体系列定义的一部分。这是我在我的一个主题中使用 Cabin 字体测试的代码副本：
{"settings": {"typography":{"fontFamilies": [ { "fontFamily": ""Cabin ", sans-serif", "slug": "primary", "name": "Primary", "fontFace": [ { "fontFamily": "Cabin", "fontWeight": "400 700", "fontStyle": "normal", "src": [ "file:./public/fonts/cabin/Cabin-VariableFont_wdth,wght.ttf" ] }, { "fontFamily": "cabin", "fontWeight": "400 700", " fontStyle" : "italic", "src": [ "file:./public/fonts/cabin/Cabin-Italic-VariableFont_wdth,wght.ttf" ] } ]} ]} } }
注意file :./public/fonts/*.ttf 是相对于主题文件夹的。主题作者需要调整它以适应他们的主题结构。
类别：新闻、WordPress
点赞
正在加载...
资源
