Css @font-face 在 ie9 中不起作用答案

【问题标题】：Css @font-face not working in ie9Css @font-face 在 ie9 中不起作用
【发布时间】：2013-05-18 15:19:25
【问题描述】：

我设法使用了一种自定义字体，该字体适用于每个值得称为“浏览器”的浏览器。好吧一如既往很酷的东西不适用于 ie（在本例中为 ie9）。

我尝试了以下方法：

@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');}

在我在谷歌上找到了一些提示后，我尝试了：

@font-face { font-family: Roboto; src: url('../fonts/roboto/Roboto-Regular.ttf');
                              src: url('../fonts/roboto/Roboto-Regular.ttf#') format('truetype');
                              font-weight: normal;
                              font-style: normal;}

仍然没有成功。好吧，据我所知，这个问题不会有“好的”解决方案，但也许有人发现了另一个糟糕的方法，即让我摆脱另一个痛苦的方法。

【问题讨论】：

@font-face works in IE8 but not IE9 的可能重复项
除了 ttf 之外，您应该使用 .woff 字体（对于新浏览器），对于旧版 IE 使用 .eot 字体，对于早期 iOS 设备使用 SVG 字体。更简单的是，为此使用 Google 网络字体。

标签： internet-explorer css internet-explorer-9 webfonts

【解决方案1】：

您需要添加格式 .eot 才能被 IE9 识别。

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
    }

source

【讨论】：

有没有一种简单的方法来获取字体的所有这些格式？
我像 Ryan de Vries 建议的那样使用 Squirrel 来获取所有格式。现在它可以在 ie 中工作，但它停止在 chrome 和 ff 中工作。
现在可以了，这只是一个小语法问题，因为我删除了最后一个 (svg) 并忘记将行尾的 , 更改为 ;.

【解决方案2】：

这个问题的答案表明IE9只支持format('woff')这个你试过了吗？

@font-face works in IE8 but not IE9

【讨论】：

【解决方案3】：

只需提供来自Google Fonts 的字体 - 点击该页面右上角的“在 Google 字体中打开”，选择您的选项，然后在末尾复制/粘贴生成的输出。节省您的带宽和麻烦，它会工作。

要仅使用常规大小，请在页面的 <head> 中 c/p：

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

或来自您的 CSS 文件：

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

或者在运行时使用 Javascript 加载它：

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Roboto::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>

【讨论】：

该应用程序将在 Intranet 中运行，但不保证有 Internet 连接，因此我必须自己托管它们。
@Chris 在这种情况下只需下载他们的 CSS 及其相关文件 - 它适用于自 IE6 以来的所有浏览器 :) 如果您镜像它们，请确保您的网络服务器为字体传递正确的 Content-type -有些浏览器如果不完全正确就会出错。

【解决方案4】：

你应该看看Squirrel

它可以让您使用正确的代码等转换您上传的字体等。效果很好！

同时将 ?#iefix 放在第二个 src: url 后面，查看此链接获取正确的代码：Question from "kraftwer1"

【讨论】：