Material 图标和 Roboto 未在 Safari 中加载 - 仅 Safari
Material Icons and Roboto not loaded in Safari - only Safari
如您在屏幕截图中所见，图标和字体未正确加载。
我们的观察是这仅在 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" />
我们测试的任何其他浏览器都能正确显示图标和字体。
（Google 浏览器在 iOS 上；Chrome 在 Windows 上）
从我们在 Safari 调试器中看到的情况来看，似乎无法下载字体文件。
（我不想写这个但是：有时我观察到它工作了很短的时间然后就停止工作了。）
在 Chrome 中，结果如下所示：
有什么建议？
- 自托管？为什么？
2019-11-13更新：
在以下位置找到更多信息：https://github.com/doanythingfordethklok/safari-cache-bug
您似乎 运行 完全陷入了您更新 post 所用的错误。
您是否可能在初始应用程序加载时多次重定向用户？
如果是这样，最安全的选择是在开始任何重定向之前等待实际用户输入，这也将确保所有内容都已正确加载。
另一种方法是等待文档通过（即 jQuery 的）document.ready 函数准备就绪：
$(document).ready(function() {
// your code here
});
您可以尝试将您的代码放在那里，或者等待用户输入，直到启动重定向。我个人对 document.ready 方法没有任何运气并切换到用户输入法。
以下方法之一可能有助于解决 Safari 浏览器中的字体加载问题。
我已经检查了上面链接的 google 字体源代码，并在此处附上了两个屏幕。请注意，仅链接了 .woff2 种字体文件格式。
这是google'Roboto'字体源码的截图
这是google'Icon'字体源代码的画面。
我发现并非所有 Safari 版本都完全支持 .woff2 格式。 9.1 以下的 Safari 版本不支持 .woff2，而 Safari 版本部分和完全支持。
下面附上截图供大家参考
- 红色 - 不支持。
- 浅绿色 - 部分支持。
- 深绿色 - 完全支持。
我认为您设备的 Safari 版本介于 3.1 - 11.1 之间。
修复
首先您需要下载您的字体文件，然后需要使用 Transfonter官方网站。请确保在单击 'convert' 按钮之前检查您需要的上述文件格式。
下载并解压缩压缩文件后，您将能够看到所有转换后的文件和 css 样式 sheet。将它们全部放在一起，并将 CSS 样式 sheet 链接到您的应用程序。
希望这能解决您的问题。
我遇到了同样的问题。对我来说，它是在 safari 中加载的，浏览器只是在加载此字体后没有重新绘制/重新计算样式（在我的例子中，它是从谷歌的 CDN 加载的）。
我所做的是，我没有在 index.html 中加载字体，而是在 App.vue CSS 中添加了 @import。如果您不使用 Vue，我想您可以添加一个 CSS 文件，该文件从 CDN 导入字体，而不是将其放在 index.html 中。
希望对大家有所帮助✌✌
我们在 https://www.flimmo.de 上遇到了同样的问题，但自托管未能解决问题。
但我找到了原因：Content Blocker
我有 Firefox Klar 运行。当我禁用它时，页面会正确呈现。
Firefox Focus/Klar 可以阻止 Web 字体，必须在 Klar 应用程序设置中将其停用，请参阅 https://github.com/mozilla-mobile/focus-ios/issues/1889
如您在屏幕截图中所见，图标和字体未正确加载。
我们的观察是这仅在 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" />
我们测试的任何其他浏览器都能正确显示图标和字体。 （Google 浏览器在 iOS 上；Chrome 在 Windows 上）
从我们在 Safari 调试器中看到的情况来看，似乎无法下载字体文件。 （我不想写这个但是：有时我观察到它工作了很短的时间然后就停止工作了。）
在 Chrome 中，结果如下所示：
有什么建议？
- 自托管？为什么？
2019-11-13更新： 在以下位置找到更多信息：https://github.com/doanythingfordethklok/safari-cache-bug
您似乎 运行 完全陷入了您更新 post 所用的错误。
您是否可能在初始应用程序加载时多次重定向用户？ 如果是这样，最安全的选择是在开始任何重定向之前等待实际用户输入，这也将确保所有内容都已正确加载。
另一种方法是等待文档通过（即 jQuery 的）document.ready 函数准备就绪：
$(document).ready(function() {
// your code here
});
您可以尝试将您的代码放在那里，或者等待用户输入，直到启动重定向。我个人对 document.ready 方法没有任何运气并切换到用户输入法。
以下方法之一可能有助于解决 Safari 浏览器中的字体加载问题。
我已经检查了上面链接的 google 字体源代码，并在此处附上了两个屏幕。请注意，仅链接了 .woff2 种字体文件格式。
这是google'Roboto'字体源码的截图
这是google'Icon'字体源代码的画面。
我发现并非所有 Safari 版本都完全支持 .woff2 格式。 9.1 以下的 Safari 版本不支持 .woff2，而 Safari 版本部分和完全支持。
下面附上截图供大家参考
- 红色 - 不支持。
- 浅绿色 - 部分支持。
- 深绿色 - 完全支持。
我认为您设备的 Safari 版本介于 3.1 - 11.1 之间。
修复
首先您需要下载您的字体文件，然后需要使用 Transfonter官方网站。请确保在单击 'convert' 按钮之前检查您需要的上述文件格式。
下载并解压缩压缩文件后，您将能够看到所有转换后的文件和 css 样式 sheet。将它们全部放在一起，并将 CSS 样式 sheet 链接到您的应用程序。
希望这能解决您的问题。
我遇到了同样的问题。对我来说，它是在 safari 中加载的，浏览器只是在加载此字体后没有重新绘制/重新计算样式（在我的例子中，它是从谷歌的 CDN 加载的）。
我所做的是，我没有在 index.html 中加载字体，而是在 App.vue CSS 中添加了 @import。如果您不使用 Vue，我想您可以添加一个 CSS 文件，该文件从 CDN 导入字体，而不是将其放在 index.html 中。
希望对大家有所帮助✌✌
我们在 https://www.flimmo.de 上遇到了同样的问题，但自托管未能解决问题。 但我找到了原因：Content Blocker
我有 Firefox Klar 运行。当我禁用它时，页面会正确呈现。
Firefox Focus/Klar 可以阻止 Web 字体，必须在 Klar 应用程序设置中将其停用，请参阅 https://github.com/mozilla-mobile/focus-ios/issues/1889