Safari 中未加载 Material Icons 和 Roboto - 仅限 Safari答案

【问题标题】：Material Icons and Roboto not loaded in Safari - only SafariSafari 中未加载 Material Icons 和 Roboto - 仅限 Safari
【发布时间】：2020-03-06 21:07:38
【问题描述】：

正如您在屏幕截图中看到的那样，图标和字体未正确加载。

我们的观察是，这只在 Safari 中不起作用。无论我们是在 iPhone 上还是在 Mac 上进行测试。

字体加载如下：

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

我们测试过的任何其他浏览器都能正确显示图标和字体。（iOS 上的 Google 浏览器；Windows 上的 Chrome）

从我们在 Safari 调试器中看到的情况来看，似乎无法下载字体文件。（我不想写这个但是：有时我观察到它工作了很短的时间然后停止工作。）

在 Chrome 中，结果如下所示：

会有什么建议？

自托管？为什么？

2019 年 11 月 13 日更新：在以下位置找到更多信息：https://github.com/doanythingfordethklok/safari-cache-bug

【问题讨论】：

您是否尝试过其他字体系列来验证 Google 端的有效负载没有问题？试试Lato 或Open Sans 之类的东西，而不是Roboto
好点。测试了它。没有区别。
我认为这是一个远射，但你永远不会知道。过去我在使用 Google 的特定字体文件时遇到过问题。
自托管字体是一种选择吗？这并不理想，但是您可以将字体 base64 编码为 CSS 的一部分。这将避免在获取您发现的资源问题时重定向。
也许可以检查this similar question。如果没有，请尝试将您的 font-family: Roboto; 放在引号中？

标签： css safari angular-material google-material-icons roboto

【解决方案1】：

我们在https://www.flimmo.de 上遇到了同样的问题，而自助托管并没有解决问题。但我找到了原因：Content Blocker

我正在运行 Firefox Klar。当我禁用它时，页面会正确呈现。

Firefox Focus/Klar 可以阻止 Web 字体，必须在 Klar 应用设置中停用，请参阅 https://github.com/mozilla-mobile/focus-ios/issues/1889

【讨论】：

【解决方案2】：

我遇到了同样的问题。对我来说，它是在 safari 中加载的，浏览器在加载此字体后并没有重新绘制/重新计算样式（在我的情况下，它是从 Google 的 CDN 加载的）。

我所做的是，我在我的 App.vue CSS 中添加了一个 @import，而不是在我的 index.html 中加载字体和包的其余部分。如果您不使用 Vue，我想您可以添加一个从 CDN 导入字体的 CSS 文件，而不是将其放在 index.html 中。

希望这会对某人有所帮助✌✌

【讨论】：

【解决方案3】：

以下方法之一可能有助于修复 Safari 浏览器中的字体加载问题。

我检查了上面链接的谷歌字体源代码并在此处附加了两个屏幕。请注意，仅链接.woff2字体文件格式。

这是 google 'Roboto' 字体源代码的屏幕。

这是 google 'Icon' 字体源代码的屏幕。

我发现.woff2 格式并非所有 Safari 版本都完全支持。 9.1 以下的 Safari 版本不支持 .woff2，而 safari 版本部分和完全支持。

下面我附上了一个屏幕供您参考。

红色 - 不支持。
浅绿色 - 部分支持。
深绿色 - 完全支持。

我认为您设备的 Safari 版本介于 3.1 - 11.1 之间。

修复

首先您需要下载您的字体文件，然后需要使用Transfonter官方网站将该字体文件上传并转换为.ttf、.eot、.woff、.woff2 格式。请确保在单击“转换”按钮之前检查您需要的上述文件格式。

下载并解压压缩文件后，您会看到所有转换后的文件和css 样式表。将它们放在一起并将CSS 样式表链接到您的应用程序。

希望这能解决您的问题。

【讨论】：

【解决方案4】：

您似乎遇到了您更新帖子时使用的错误。

您是否可能在初始应用加载时多次重定向用户？如果是这样，最安全的选择是在开始任何重定向之前等待实际的用户输入，这也将确保所有内容都已正确加载。

另一种方法是通过（即 jQuery 的）document.ready 函数等待文档准备就绪：

$(document).ready(function() {
    // your code here
});

您可以尝试将代码放在那里，或者等待用户输入，直到启动重定向。我个人对 document.ready 方法没有任何运气并切换到用户输入法。

【讨论】：