7

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

在此处输入图像描述

我们的观察是,这只在 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

4

4 回答 4

3

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

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

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

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

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

于 2019-11-13T15:47:07.480 回答
1

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

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


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

在此处输入图像描述


这是谷歌“图标”字体源代码的屏幕。

在此处输入图像描述


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

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

在此处输入图像描述

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

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


使固定

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

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

希望这能解决您的问题。

于 2019-11-20T07:26:34.170 回答
0

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

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

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

于 2020-06-10T09:37:36.673 回答
0

我们在https://www.flimmo.de上遇到了同样的问题,而自托管并没有解决问题。但我找到了原因:内容拦截器

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

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

于 2021-06-02T08:58:35.417 回答