材质图标和Roboto未在Safari中加载-仅Safari

如您在屏幕快照中所见,图标和字体未正确加载。

材质图标和Roboto未在Safari中加载-仅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" />

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

根据我们在Safari调试器中看到的内容,似乎无法下载字体文件。 (我不想写这个,但是:有时我已经观察到它可以工作很短的时间,然后停止工作。)

在Chrome中,结果如下:

材质图标和Roboto未在Safari中加载-仅Safari

有什么建议?

  • 自托管?为什么?

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

wpcwpcwpcwpc 回答:材质图标和Roboto未在Safari中加载-仅Safari

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

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

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

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

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

,

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

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


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

enter image description here


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

enter image description here


我发现.woff2格式不受所有Safari版本的完全支持。 9.1以下的Safari版本不支持.woff2,而Safari版本则部分和完全支持。

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

enter image description here

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

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


修复

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

一旦下载并解压缩文件,您将看到所有转换后的文件和一个css样式表。将所有内容放在一起,并将该CSS样式表链接到您的应用程序。

希望这可以解决您的问题。

,

我有同样的问题。对我来说,它是用野生动物园加载的,浏览器只是在加载该字体后没有重绘/重新计算样式(在我的情况下是从Google 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

本文链接:https://www.f2er.com/3125991.html

大家都在问