Question

我正在尝试在我的网站中使用Google字体 Muli 。我可以看到字体在chrome，FF和opera中完美地工作。

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

方法1：

build.environment.get("BUILD_NUMBER")

方法2：

<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>

方法3：

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

我发现令人震惊的是，IE根本没有加载@import url(http://fonts.googleapis.com/css?family=Muli);网址。我尝试在新窗口中加载相同的URL并且没有响应但是在其他浏览器中也是如此。

我需要包含哪些内容才能在IE中使用它？

Answer 1

您在本地或在网站上进行测试吗？ IE存在基于HTTPS的Web字体问题（可能是您的问题）。

Answer 2

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

兼容性视图使其不仅向Web服务器发送MSIE 7.0用户代理字符串，还向服务器要加载的资源发送MSIE 7.0用户代理字符串。这意味着Google会看到MSIE 7.0用户代理并假设您需要EOT字体而不是WOFF格式。这就是谷歌因为向IE发送不同内容而受到指责的原因。 IE说谎，说它很古老。当您关闭该复选框时，Google会看到新的用户代理字符串，它会起作用！

此外，您似乎需要在元标记中设置初始比例和最小比例，才能获得合适的渲染引擎。至少那似乎是我修改布局的变化（之前我只使用了初始比例）

<form>
  <div class="form-group row">
    <label for="example-url-input" class="col-sm-1 col-form-label">URL</label>
    <label for="upload-btn" class="btn btn-primary btn-file">Upload</label>
    <div class="col-sm-7">
      <input class="form-control" type="url" id="example-url-input">
      <input type="file" class="hidden" id="upload-btn" onchange='$("example-url-input").html($(this).val());'>
    </div>
  </div>
</form>

Answer 3

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

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

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

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

Answer 4

方法3，为我工作好！请在JSFiddle上查看。

HTML

<h1>Hello world!</h1>

CSS

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

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

谷歌字体在IE11中不起作用

4 个答案: