Question

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

我尝试了以下内容：

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

经过一些提示，我在google上发现了这一点，我试过了：

@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;}

仍然没有成功。正如我所知，根据经验，这个问题不会有“好”的解决方案，但也许有人发现了另一个糟糕的东西，即黑客让我脱离了另一个，即苦难。

Answer 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

Answer 2

您应该查看Squirrel

它允许您使用正确的代码etcetc转换您上传的字体。效果很棒！

Aswell把？#iefix放在第二个src：url后面，看到这个链接是否有正确的代码：Question from "kraftwer1"

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

Answer 4

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

@font-face works in IE8 but not IE9

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

4 个答案: