CSS @ font-face不能使用Firefox，但使用Chrome和IE [英] CSS @font-face not working with Firefox, but working with Chrome and IE

问题描述

以下代码适用于Google Chrome测试版以及IE 7.但是，Firefox似乎有此问题。我怀疑它是我的CSS文件的一个问题，因为我知道Firefox不是太关于跨域导入友好。

The following code works in Google Chrome beta as well as IE 7. However, Firefox seems to have a problem with this. I'm suspecting it to be a problem of how my CSS files are included, cause I know Firefox is not too friendly about cross-domain imports.

但这是所有只是静态HTML，没有跨域的问题。

But this is all just static HTML and there's no question of cross-domain.

在我的landing-page.html我做一个CSS导入，如：

On my landing-page.html I do a CSS import like so:

<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" />

在main.css中我有另一个导入：

Within the main.css I have another imports like so:

@import url("reset.css");
@import url("style.css");
@import url("type.css");

并且在type.css中我有以下声明：

and within the type.css I have the following declarations:

@font-face {
    font-family: "DroidSerif Regular";
        src: url("font/droidserif-regular-webfont.eot");
        src: local("DroidSerif Regular"), 
                url("font/droidserif-regular-webfont.woff") format("woff"), 
                url("font/droidserif-regular-webfont.ttf")     format("truetype"), 
                url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q")     format("svg"); 
    font-weight: normal; font-style: normal; }
@font-face {
    font-family: "DroidSerif Bold";
    src: url("font/droidserif-bold-webfont.eot");
    src: local("DroidSerif Bold"), 
        url("font/droidserif-bold-webfont.woff") format("woff"), 
        url("font/droidserif-bold-webfont.ttf") format("truetype"), 
        url("font/droidserif-bold-webfont.svg#webfontpB9xBi8Q") format("svg");
    font-weight: normal; font-style: normal; }

body { font-family: "DroidSerif Regular", serif; }
h1 { font-weight: bold; font-family: "DroidSerif Bold", serif; }

我在与type.css相同的位置有一个名为font的目录。这个字体目录包含所有的woff / ttf / svg文件等。

I have a directory called "font" in the same location as type.css. This font directory contains all the woff/ttf/svg files etc.

我在这一个。 它适用于Chrome和IE，但不适用于Firefox 。这怎么可能？

I'm stumped on this one. It works in Chrome and IE but not on Firefox. How is this possible? What am I missing?

推荐答案

LOCally运行网站（ file：/// ）

Firefox附带了一个非常严格的file uri origin（ file：/// ）策略默认情况下：要使其像其他浏览器一样运行，请转到 about：config ，过滤 fileuri 切换以下偏好设定：

LOCALLY RUNNING THE SITE (file:///)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

将其设置为 false ，您应该可以跨不同的路径级别加载本地字体资源。

Set it to false and you should be able to load local font resources across different path levels.

根据我的下面的评论，你在部署你的网站后遇到这个问题，你可以尝试添加一个额外的头，看看你的问题是否自己配置为一个跨域问题：不应该，因为你是指定相对路径，但我会给它一个尝试：在你的.htaccess文件中，指定你想为每个请求的.ttf / .otf / .eot文件发送一个附加头： p>

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

坦率地说，我不会指望它有什么区别，但它很简单，否则尝试对您的字体字体使用 base64编码，但它也可以工作。

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

可以进行一个很好的回顾此处

A nice recap is available here

这篇关于CSS @ font-face不能使用Firefox，但使用Chrome和IE的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！