1

我正在尝试使我的网站与 IE 更兼容（现在为它开发不再是一场噩梦），但我无法让一些网络字体工作。这是我的标记：

@font-face句法：

@font-face {
    font-family:Roboto Thin;
    font-weight:100;
    font-style:normal;
    src:url(/fonts/ttf/roboto-thin-webfont.ttf) format("truetype"),
        url(/fonts/eot/roboto-thin-webfont.eot) format("embedded-opentype"),
        url(/fonts/svg/roboto-thin-webfont.svg) format("svg"),
        url(/fonts/otf/roboto-thin-webfont.otf) format("opentype"),
        url(/fonts/woff/roboto-thin-webfont.woff) format("woff");
}

CSS文件中的实现：

.animation-text {
    font-family:Roboto Thin,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight:100;
    font-style:normal;
    text-align:center;
    margin:auto;
    position: absolute;
    background-position: center;
    background-size: contain;
    animation-fill-mode: forwards;
    top: 1px;
}

#design {
    transform-origin:50% 75%;
    font-size:60px;
    color:#ccc;
    height:auto;
    padding-top:540px;
    opacity:0;
    z-index:4;
    animation-name:text;
    animation-delay:3000ms;
    animation-duration:500ms;
    animation-timing-function:ease-out;
}

HTML：

<div class="animation-text" id="design">Design</div>

我还在 OS X 下运行的其他四种主要浏览器（Firefox 19、Chrome 25、Safari 6.1、Opera 12）中测试了代码，它们都完美地显示了 Roboto。在 Windows 8 下运行的 IE10 回退到 Arial。不应该包括字体.eot的.otf版本已经解决了这个问题吗？

4

1 回答 1

7

尝试引用字体并删除空格，如下所示...（您需要相应地更改路径）

@font-face {
    font-family: 'RobotoThin';
    src: url('Roboto-Thin-webfont.eot');
    src: url('Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-Thin-webfont.woff') format('woff'),
         url('Roboto-Thin-webfont.ttf') format('truetype'),
         url('Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

.animation-text {
    font-family: 'RobotoThin',Helvetica Neue,Helvetica,Arial,sans-serif;
    /* ... other styles ... */
}
于 2013-03-07T03:49:59.640 回答