使Web字体在IE10中工作 [英] Getting web fonts to work in IE10

问题描述

我正在尝试使我的网站与IE兼容(现在开发它已不再是一场噩梦了)，但是我无法使用某些网络字体.这是我的标记:

I'm trying to make my website more IE-compatible (now that developing for it is less of a nightmare), but I can't get some web fonts to work. Here's my markup:

@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版本吗?

I've also tested out the code in the four other major browsers running under OS X (Firefox 19, Chrome 25, Safari 6.1, Opera 12), and they all display Roboto flawlessly. IE10 running under Windows 8 falls back to Arial. Shouldn't including .eot and .otf versions of the fonts have fixed this?

推荐答案

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

Try quoting the font and removing the space like the following... (you'll need to change the paths accordingly)

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

这篇关于使Web字体在IE10中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！