0

修复网站相关问题仍然是一种新事物。我发现在 IE 11 中清除缓存并加载我的网站后，Google 字体在我的网页最终加载前 240 秒下载。我包括图像：http://imgur.com/p5mILNV

有人可以告诉我我做错了什么吗？

谢谢！

4

1 回答 1

0

IE11 与 Google 字体有一些问题，尤其是SSL上的字体。您可以尝试以下解决方案：

  1. Web Font Loader：使用Web Font Loader javascript 而不是添加字体的默认方法（CSS 方式）。它提供了一个通用接口来加载字体，而不管源是什么，然后添加一组标准事件，您可以使用这些事件来控制加载体验。Web Font Loader 能够加载来自Google Fonts、 Typekit 、Fonts.com和Fontdeck的字体，以及自托管的 Web 字体。它由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. 附加样式标签：一个奇怪的标签，但它似乎在某些情况下有效。

在 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

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

  2. 最大 http 连接数：每个浏览器单次都有最大 http 连接数限制。例如，您的网站有 21 个非常高的CSS 文件。您可以从 Firefox 的 devtools（F12 > Network Monitor > CSS）中看到它。也许 IE11 不能同时获取所有的 CSS 文件。您可以使用任务运行器来加入/缩小您的 CSS 文件。

  3. 在其他机器上测试：查看Browserstack以在其他机器上测试。如果您更喜欢本地开发，Microsoft 提供免费下载虚拟机​​来测试 IE。

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

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

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

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

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

于 2017-05-26T22:57:39.667 回答