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

Question

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



我们的观察是，这只适用于 不工作在 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 上的谷歌浏览器；Windows 上的 Chrome)

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

在 Chrome 中，结果如下所示:



建议是什么？

自托管？为什么？

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

Answer 1

您似乎正好遇到了您更新帖子的错误。

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

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

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

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