为啥我不能在 WordPress functions.php 中将多个 Google 字体排入队列？

Posted 2023-02-24

【中文标题】为啥我不能在 WordPress functions.php 中将多个 Google 字体排入队列？

【英文标题】：Why can't I enqueue multiple Google Fonts in WordPress functions.php?为什么我不能在 WordPress functions.php 中将多个 Google 字体排入队列？

【发布时间】：2020-07-12 04:40:39

【问题描述】：

我正在使用 wp_enqueue_style 来排队 this Google Font file。这是我的代码：

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,400&family=Neuton:ital,wght@0,300;0,400;0,700;1,400&display=swap', [] );

这是在我的functions.php文件中。

但是，当我在加载的页面上查看源代码时，该字体文件的 URL 被缩减为：https://fonts.googleapis.com/css2?family=Neuton%3Aital%2Cwght%400%2C300%3B0%2C400%3B0%2C700%3B1%2C400&display=swap&ver=5.3.2

如您所见，通过wp_enqueue_style 输出后，第一个family 参数已被删除。有没有办法在不做任何事情的情况下解决这个问题？我认为可能有一种过时的方式来构建两个字体系列的 URL，但我宁愿能够使用谷歌现在提供的东西。我在wp_enqueue_style 中的原始 URL 是 Google Fonts 生成的供我嵌入的 URL。

【参考方案1】：

这实际上与 PHP 及其解析查询参数的方式有关。

https://www.php.net/manual/en/function.parse-str.php

无论如何，当前的解决方法是将“null”传递给版本参数，以使 WordPress 不会在 URL 中添加“ver”。

wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,700;1,400&family=Neuton:ital,wght@0,300;0,400;0,700;1,400&display=swap', [], null );

以“null”结尾将消除问题，因为 WordPress 不会尝试向 URL 添加任何其他参数，因此不会通过 PHP 的查询字符串处理函数运行它。

这可能会在未来的 WordPress 更新中更直接地解决。但是，无论如何，在这些外部 URL 上没有版本是有意义的。

【讨论】：

这应该是正确的答案，就像一个魅力！谢谢

谢谢，我已将此标记为正确答案，因为它对我有用！

【参考方案2】：

相同的查询参数定义了两次 (family)，因此 WordPress 删除了一个。这在典型的上下文中是很正常的事情：如果有重复的查询参数，则只使用最后一个。 WordPress 在对 URL 进行排队时使用了这个“规则”。

我无法告诉您为什么 Google 字体将语法从 | 分隔符（例如：https://fonts.googleapis.com/css?family=Montserrat|Neuton&display=swap）更改为这个重复的 family 参数，但看起来可能是因为像您这样的复杂性在您的网址中查看。有一件事是肯定的：这会像你现在遇到的那样造成一些麻烦。要么 WordPress 需要对此进行调整，要么 Google 字体必须更新/恢复其 URL 语法。这可能不会在今天发生。

在这种情况下，您最好暂时自己进行更改，而是使用经典站点（在 Google 字体导航栏中）来构建您的字体 URL。我知道你不会有那么多选择（看起来你正在尝试使用可变字体，这太棒了！），所以有点令人失望。

您也可以下载文件并自行托管这些字体。在许多情况下，这也是性能提升。

【讨论】：

这也是我的怀疑，但我想我会检查一下。我将这篇文章作为他们 Google 字体网站上的反馈发送给他们，因此希望它最终能引起他们的注意。我也会将其发送到 WordPress。

很好地向他们举报这个问题，希望他们能够解决这个问题。