html - @Font-Face 自定义字体在 Firefox 中不起作用

Question

我无法让自定义的非网络安全字体在 Firefox 中工作。我使用以下代码在 Chrome、Opera 和 Safari 中运行它:

@import url(http://fonts.googleapis.com/css?family=Antic+Slab);

@font-face {
font-family: 'BadgerFont';
src: url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.eot');
src: url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.woff') format('woff'),
     url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.ttf') format('truetype'),
     url('http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.svg#orator_stdregular') format('svg');
font-weight: normal;
font-style: normal;
}

body{
font-family: BadgerFont, 'Antic Slab', Serif;
letter-spacing: 1px;
}

我在这里错过了什么？ Heres a link如果您想亲眼看看，请访问该网站。

Answer 1

默认情况下，Firefox 只接受相对链接。 Firefox(从 v3.5 开始支持 @font-face)默认不允许跨域字体。这意味着字体必须从相同的域(和子域)提供，除非您可以向字体添加“Access-Control-Allow-Origin” header 。

或者，以其他方式加载字体(本地或使用 CDN)

https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS#Access-Control-Allow-Origin