让网络字体在IE10中工作

Question

我正在努力使我的网站更兼容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版本的字体已修复此？

Answer 1

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

@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 ... */
}