Question

This site使用@ font-face在顶部导航栏中显示Myriad Pro。我认为这是违反许可证的行为。我很快就会寻找替代版本。我可能会看看Cufon？我想首先使用@ font-face规则，然后使用不同的字体。

该网站有CSS：

<!--[if IE]>
@font-face {
    font-family: 'MyriadPro-BoldCond';
        src: url('.../myriadpro-boldcond.eot');
}
<![endif]-->

@font-face {
    font-family: 'MyriadPro-BoldCond';
        src: url('.../myriadpro-boldcond.eot?#iefix') format('embedded-opentype'),
            url('.../myriadpro-boldcond.woff') format('woff'),
            url('.../myriadpro-boldcond.ttf') format('truetype'),
            url('.../myriadpro-boldcond.svg#myriadpro-boldcond') format('svg');
        font-weight: normal;
        font-style: normal;
}

但是，字体仅显示在Chrome中，而不是IE9，Opera或Firefox。

更新：我已将IE条件输入移至其他条件下方，但问题仍然存在于IE中：

@font-face {
    font-family: 'MyriadPro-BoldCond';
        src: url('http:/.../myriadpro-boldcond.eot?#iefix') format('embedded-opentype'),
               url('.../myriadpro-boldcond.woff') format('woff'),
               url('.../myriadpro-boldcond.ttf') format('truetype'),
               url('...myriadpro-boldcond.svg#myriadpro-boldcond') format('svg');
        font-weight: normal;
        font-style: normal;
}

<!--[if IE]>
@font-face {
    font-family: 'MyriadPro-BoldCond';
        src: url('...myriadpro-boldcond.eot');
}
<![endif]-->

Answer 1

从Firefox错误控制台，加载您的网站时：

[02：31：52.279]可下载字体：下载失败（font-family：“MyriadPro-BoldCond”样式：正常权重：正常拉伸：正常src索引：1）：不允许错误的URI或跨站点访问来源：http://www.doig.com.au/wp-content/themes/brinkley/myriadpro-boldcond.woff @ http://brinkley.doig.com.au/wp-content/themes/brinkley/style.css?ver=3.4.2

请注意，该网站位于brinkley.doig.com.au，但字体是从www.doig.com.au加载的。并且可能服务器没有提供正确的CORS标头。

它在Chrome中的唯一原因是Chrome无法正确实现http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction

Font-Face无法在Firefox，Opera，IE中使用

1 个答案: