IE在网页上下载谷歌字体240秒？

Question

解决网站相关问题仍然是一种新事物。我发现在 IE 11 中清除缓存并加载我的网站后，Google 字体在我的网页最终加载前 240 秒下载。我包括图片：

谁能告诉我我做错了什么？

谢谢！

Answer 1

IE11 在 Google 字体方面存在一些问题，尤其是 fonts over SSL。您可以尝试以下解决方案：

1. Web Font Loader： 使用Web Font Loader javascript，而不是添加字体的默认方法（CSS 方式）。它提供了一个通用接口来加载字体，而不管源是什么，然后添加一组标准的事件，您可以使用它来控制加载体验。 Web Font Loader 能够从 Google Fonts、Typekit、Fonts.com 和 Fontdeck 加载字体，以及自托管的网络字体。它由 Google 和 Typekit 共同开发。

示例用法：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
  WebFont.load({
    google: {
      families: ['Droid Sans', 'Droid Serif']
    }
  });
</script>

如果此解决方案有效，您可以为 IE11 实现一个特定的案例。

1. 附加样式标签：一个奇怪的标签，但它seems to work in some cases。

借助 jQuery：

$('head').append('<style></style>')

1. 调试和验证 HTML： 第三个但也许最重要的解决方案是检查您的 HTML 标记。解析错误可能会导致您错过任何事情。 https://validator.w3.org/nu/?doc=https://nutikell.com/ W3 Validator 给出了 5 个错误和一个你应该真正修复的致命错误。正如验证器所说的致命错误，任何浏览器“在上次错误后无法恢复。任何进一步的错误都将被忽略。”这可能是 IE 的问题。

来自验证结果：

3. [Error]: Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
From line 162, column 5; to line 162, column 11
...

5. [Error]: End tag "a" violates nesting rules.
From line 463, column 3; to line 463, column 89
<a href="https://nutikell.com/nutikellad/nutikell-westyx-king/" class="main-thumbnail">

6. [Fatal Error]: Cannot recover after last error. Any further errors will be ignored.
From line 463, column 3; to line 463, column 89

4. 浏览器插件：脚本拦截器或广告拦截器等 IE 插件也可能会延迟加载字体文件并导致请求超时。检查你有没有。

5. 最大 http 连接数： 每个浏览器一次都有一个 maximum http connections limit。您的网站，例如，has 21 CSS files，它非常高。您可以从 Firefox 的 devtools（F12 > Network Monitor > CSS）中看到它。也许 IE11 不能同时获取所有的 CSS 文件。您可以使用task runner 来加入/缩小您的 CSS 文件。

6. 在其他机器上测试：查看Browserstack 在其他机器上测试。如果您更喜欢本地开发，Microsoft 提供 free downloads of virtual machines 来测试 IE。

7. EOT 和 WOFF 字体无法在 IE 中通过 HTTPS 加载：old post 可以给出一个想法：我们在所有版本的 EOT 和 WOFF 字体上都遇到了同样的问题Internet Explorer (7-11) 未通过 HTTPS 加载。经过数小时的反复试验并将我们的标头与其他工作站点进行比较后，我们发现是 vary 标头搞砸了。取消设置这些文件类型的标头立即解决了我们的问题。

如果您的服务器是 Apache，下面的代码将放在 .htaccess 文件中：

<FilesMatch "\.(woff)$">
    Header unset Vary
</FilesMatch>

<FilesMatch "\.(eot)$">
    Header unset Vary
</FilesMatch>

在那篇文章中有很多针对这种情况的解决方案。您也可以查看它们。