Google 字体在 IE11 中不起作用答案

【问题标题】：Google font is not working in IE11Google 字体在 IE11 中不起作用
【发布时间】：2015-10-20 21:28:03
【问题描述】：

我正在尝试在我的网站中使用 Google 字体 Muli。我可以看到字体在 chrome、FF 和 opera 中完美运行。

当我在 IE9、10、11 中打开我的网站时，它根本不使用字体。我尝试了以下方法，但仍然没有运气。

方法一：

<script type="text/javascript">
 WebFontConfig = {
 google: { families: [ 'Muli::latin' ] }
};
(function() {
 var wf = document.createElement('script');
 wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
 wf.type = 'text/javascript';
 wf.async = 'true';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(wf, s);
})(); </script>

方法二：

 <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>

方法三：

  @import url(http://fonts.googleapis.com/css?family=Muli);

我发现令人震惊的是，IE 根本没有加载http://fonts.googleapis.com/css?family=Muli url。我尝试在新窗口中加载相同的 url，但它没有响应，但在其他浏览器中也一样。

我需要在 IE 中添加什么内容吗？

【问题讨论】：

检查 IE 的控制台。那里有任何错误吗？方法 2 应该可以在 IE11 中运行。

标签： html css internet-explorer fonts google-font-api

【解决方案1】：

方法3，对我很好！请在JSFiddle查看。

HTML

<h1>Hello world!</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Muli);

h1 {
    font-family: 'Muli', sans-serif;
}

【讨论】：

【解决方案2】：

您是在本地测试还是在实时网站上进行测试？ IE 在 HTTPS 上的 Web 字体存在问题（这可能是您的问题）。

【讨论】：

谢谢！这节省了我的时间。仅供参考，这与 Pragma 标头有关

【解决方案3】：

好的 - 请 OP 检查并查看该站点是否是本地“内部网”站点，例如本地计算机或本地网络上的附近计算机。如果是这样，请打开兼容性视图设置并取消选中底部的框以在兼容性视图中呈现所有 Intranet 站点。

Compatibility View 导致它不仅将 MSIE 7.0 用户代理字符串发送到 Web 服务器，还发送到服务器要求加载的资源。这意味着 Google 看到的是 MSIE 7.0 用户代理，并假定您需要 EOT 字体而不是 WOFF 格式。这就是为什么谷歌因为向 IE 发送不同的东西而受到指责。 IE 在撒谎，说它很古老。当您关闭该复选框时，Google 将看到新的用户代理字符串并且它会起作用！

此外，您似乎需要在元标记中设置初始比例和最小比例才能获得一个不错的渲染引擎。至少这似乎是对我来说固定布局的变化（以前我只使用初始比例）

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

【讨论】：

好猜！为了解决这个问题，我从 Google 下载了 .woff 和 .woff2 字体并将它们放到我自己的服务器上，它解决了问题。谢谢

【解决方案4】：

我发现在 google 字体样式表中只使用了 woff2。
https://fonts.googleapis.com/css?family=Muli

而且，根据 caniuse 的说法，ie11 不支持 woff2。 :O
https://caniuse.com/#feat=woff2

我在 ie11 中使用 Google Fonts 的解决方案是从 Google Fonts 实际下载我的字体并使用 zip 文件中的 ttf 文件，
How to include a font .ttf using CSS?

注意：我不知道您下载时是否所有 Google 字体都有 ttf。但是，我的做到了，所以这对我有用。如果他们知道这一点，也许有人可以跟进我的回答！ :)

【讨论】：