问在Safari中没有装载的材料图标和Roboto -只有Safari

EN

你似乎遇到了一个错误，你更新了你的帖子。

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

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

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

您可以尝试把您的代码放在那里，或者，或者，等待用户输入直到开始重定向。我个人对document.ready方法没有任何进展，转而使用了用户输入方法。

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

我已经检查了上面链接的google字体源代码，并在这里附加了两个屏幕。请注意，只有.woff2字体文件格式被链接。

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

​

​

这是google‘图标’字体源代码.的屏幕

​

​

我发现.woff2格式并不是所有Safari版本都完全支持的。9.1下面的Safari版本不支持.woff2，而safari版本部分地完全支持这一点。

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

​

​

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

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

修复

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

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

希望这能解决你的问题。

我也有同样的问题。对我来说，它是在safari中加载的，浏览器只是没有在加载这个字体后重新绘制/重新计算样式(在我的例子中，它是从Google的CDN加载的)。

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

希望这能对✌✌有所帮助