@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”标头。

或者，只是以其他方式加载字体（本地或使用 CDN）

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

Answer 2

您应该学习在 Firefox 中使用您的开发人员工具。第五个控制台消息是这样的：

[08:28:41.886] Unrecognized at-rule or error parsing at-rule '@import'. @ http://cdn.bigcartel.com/theme_stylesheets/19013562/2771282761/theme.css:474

来自MDN：

@import CSS at-rule 允许从其他样式导入样式规则 床单。这些规则必须先于所有其他类型的规则，除了 @charset 规则；因为它不是嵌套语句，所以不能使用 在条件组规则中。

编辑

请查看您的控制台，它会为您提供所有答案

[11:00:17.697] downloadable font: download failed (font-family: "BadgerFont" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed
source: http://www.vectorthatfox.co.uk/badgerandkingdom/fonts/oratorstd-webfont.woff @ http://cdn.bigcartel.com/theme_stylesheets/19013568/2771283940/theme.css

正如消息中所说，Firefox 将不允许您嵌入跨域字体。如果您想使用该字体，请在允许的情况下从该网站下载它们，然后将它们上传到您自己的域并自行链接。