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不允许您嵌入跨域字体。如果您想使用该字体，请在允许的情况下从该网站下载，然后将其上传到您自己的域并自行链接到它们。

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

2 个答案: