IE 10没有加载字体

Question

链接到相关网站:http://qbtei.com/nationalretail/public

在我的fonts.css中,我正在加载一堆字体,如下所示:

@font-face {
    font-family: GothamBook;
src: url('../fonts/Gotham-Book.otf');
src: url( ../fonts/Gotham-Book.otf ); /* IE */
    }

@font-face {
    font-family: GothamBookItalic;
src: url('../fonts/gothambookitalic.otf');
src: url( ../fonts/gothambookitalic.otf ); /* IE */
    }

@font-face {
    font-family: GothamBold;
    src: url('../fonts/gothambold.otf');
    src: url( ../fonts/gothambold.otf ); /* IE */
}

在Firefox/chrome这些字体没有问题,但在IE 10中,当我检查元素时,这个css文件显示为空并且字体未加载

我曾尝试使用http://www.fontsquirrel.com/tools/webfont-generator创建一个看起来像这样的新字体css表,但最终无法在firefox,chrome或Internet Explorer中使用

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

}

我在css中使用我的字体,如下所示:

.nav-text{
    font-family: GothamLight;
    font-size: 21px;
    color: #d9e3e9;
    font-weight: 100;
    position: absolute;
  right: 28px;
  top: 13px;
}

Answer 1

这不起作用,因为所有版本的IE都不支持.otf字体格式 - 请参阅:http://webfonts.info/node/379

请尝试以下方法:

@font-face {
    font-family: "GothamBook";
    src: url("../fonts/Gotham-Book.eot");
    src: url(".../fonts/Gotham-Book.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Gotham-Book.woff") format("woff"), 
    url("../fonts/Gotham-Book.ttf") format("truetype"), 
    url("../fonts/Gotham-Book.svg#Gotham-Book") format("svg");
}

您使用fontsquirrel的webfont生成器生成的版本中的路径设置是否正确？此外,font-family名称看起来不对.我想它应该是"GothamBold".

并且还要记住适当的字体许可证......!;-)

在使用字体的CSS文件中,至少应该像这样添加一个通用字体系列:

font-family: GothamLight, "sans-serif";

或另外一种替代字体(可能在每个平台上都可用)

font-family: GothamLight, Arial, Helevetica, "sans-serif";