为什么我不能在WordPress的functions.php文件中排队多个Google字体？

Question

我正在使用wp_enqueue_style来引入 这个Google字体文件。这是我的代码：

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

正如你所看到的，第一个family参数在通过wp_enqueue_style输出后被删除了。有没有办法在不使用任何hacky方法的情况下解决这个问题？我认为可能存在一种过时的方法来构建包含两个字体系列的URL，但我宁愿使用Google现在提供的。

- thenomadicmann

Answer 1

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

https://www.php.net/manual/zh/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上没有版本是有道理的。

- Otto

---

这应该是正确的答案，完美地运行了！谢谢。 - Alyas

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

Answer 2

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

我无法告诉您为什么Google Fonts将语法从 | 分隔符（例如：https://fonts.googleapis.com/css?family=Montserrat|Neuton&display=swap）更改为重复的family 参数，但看起来可能是由于像您的URL中所看到的复杂性。有一件事可以确定：这将会导致一些麻烦，就像您现在遇到的问题一样。要么WordPress需要适应这种变化，要么Google Fonts需要更新/恢复其URL语法。这可能不会在今天发生。

在这种情况下，暂时最好自己进行更改，通过使用经典网站（在Google Fonts导航栏中）构建您的字体URL。我知道您将得到的选项不多（看起来您正在尝试使用可变字体，这是很棒的！），所以有点失望。

另一种选择是下载文件并自主托管这些字体。在许多情况下这也会提高性能。

- chriskirknielsen

---

这也是我的怀疑，但我想检查一下 Stack Overflow。我将此帖子发送给他们，作为他们的 Google 字体网站反馈，希望它能出现在他们的雷达上。我也会将其发送给 WordPress。 - thenomadicmann

很好的提醒他们，希望他们能够解决这个问题。 - chriskirknielsen