CSS @font-face 不适用于 Firefox，但适用于 Chrome 和 IE

CSS @font-face not working with Firefox, but working with Chrome and IE

提问by Kaushik Gopal

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.

以下代码适用于 Google Chrome beta 和 IE 7。但是，Firefox 似乎对此有问题。我怀疑这是如何包含我的 CSS 文件的问题，因为我知道 Firefox 对跨域导入不太友好。

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

但这只是静态 HTML，不存在跨域问题。

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

在我的登陆页面.html 我做一个 CSS 导入，如下所示：

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

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

在 main.css 中，我还有一个像这样的导入：

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

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

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

@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; }

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

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

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

我被这个难住了。它适用于 Chrome 和 IE，但不适用于 Firefox。这怎么可能？我错过了什么？

回答by Manuel

LOCALLY RUNNING THE SITE (file:///)

本地运行站点 ( 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 fileuriand toggle the following preference:

file:///默认情况下，Firefox 带有非常严格的“文件 uri 来源”( ) 策略：要让它像其他浏览器一样运行，请转到about:config、过滤器fileuri并切换以下首选项：

security.fileuri.strict_origin_policy

security.fileuri.strict_origin_policy

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

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

PUBLISHED SITE

发布网站

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:

根据我下面的评论，并且您在部署站点后遇到此问题，您可以尝试添加一个额外的标头，以查看您的问题是否将自身配置为跨域问题：它不应该，因为您指定的是相对路径，但无论如何我都会尝试一下：在您的 .htaccess 文件中，指定您要为每个被请求的 .ttf/.otf/.eot 文件发送一个额外的标头：

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

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

坦率地说，我不希望它有任何不同，但它是如此简单值得尝试：否则尝试为您的字体字体使用base64 编码，虽然丑陋但它也可以工作。

A nice recap is available here

这里有一个很好的回顾

回答by alademann

In addition to adding the following to your .htaccess: (thanks @Manuel)

除了将以下内容添加到您的 .htaccess 之外：（感谢@Manuel）

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

You may want to try explicitly adding the webfont mime types to the .htaccess file... like this:

您可能想尝试将 webfont mime 类型显式添加到 .htaccess 文件中……像这样：

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

In the end, my .htaccess file looks like this (for the section that enables webfonts to work in all browsers)

最后，我的 .htaccess 文件看起来像这样（对于使 webfonts 在所有浏览器中工作的部分）

# BEGIN REQUIRED FOR WEBFONTS

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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

# END REQUIRED FOR WEBFONTS

回答by israeli

I've had this problem too. I found the answer here: http://www.dynamicdrive.com/forums/showthread.php?t=63628

我也遇到过这个问题。我在这里找到了答案：http: //www.dynamicdrive.com/forums/showthread.php?t=63628

This is an example of the solution that works on firefox, you need to add this line to your font face css:

这是适用于 Firefox 的解决方案示例，您需要将此行添加到您的字体 css 中：

src: local(font name), url("font_name.ttf");

回答by Octavian Vladu

I had exactly the same problem. I had to create a new folder called "fonts" and put it in wp_content. I can access it from my browser like this http://www.example.com/wp-content/fonts/CANDY.otf

我遇到了完全相同的问题。我必须创建一个名为“fonts”的新文件夹并将其放在 wp_content 中。我可以像这样从我的浏览器访问它http://www.example.com/wp-content/fonts/CANDY.otf

Previously, the fonts folder was in the same directory as my CSS file, and the @font-face looked like this:

以前，fonts 文件夹与我的 CSS 文件在同一目录中，@font-face 如下所示：

@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}

As i mentioned above, this was not working in Firefox but only with Chrome. Now it is working because I used an absolute path:

正如我上面提到的，这不适用于 Firefox，而只能用于 Chrome。现在它正在工作，因为我使用了绝对路径：

@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}

回答by tarquinwinot

I was having the same problem. Double check your code for H1, H2 or whatever style you are targeting with the @font-face rule. I found I was missing a coma after font-family: 'custom-font-family' Arial, Helvetica etcIt was showing up fine in every browser apart from Firefox. I added the coma and it worked.

我遇到了同样的问题。使用@font-face 规则仔细​​检查您的 H1、H2 或任何您要定位的样式的代码。我发现我错过了昏迷，因为font-family: 'custom-font-family' Arial, Helvetica etc它在除 Firefox 之外的每个浏览器中都显示良好。我添加了昏迷并且它起作用了。

回答by ruyadorno

I'll just leave this here because my co-worker found a solution for a related "font-face not working on firefox but everywhere else" problem.

我只是把这个留在这里，因为我的同事找到了一个相关的“字体不能在 Firefox 上工作，但在其他地方工作”问题的解决方案。

The problem was just Firefox messing up with the font-family declaration, this ended up fixing it:

问题只是 Firefox 搞乱了 font-family 声明，这最终解决了它：

body{ font-family:"MyFont" !important; }

PS: I was also using html5boilerplate.

PS：我也在使用 html5boilerplate。

回答by davus

I had exactly this problem running ff4 on a mac. I had a local development server running and my @font-face declaration worked fine. I migrated to live and FF would 'flash' the correct type on first page load, but when navigating deeper the typeface defaulted to the browser stylesheet.

我在 Mac 上运行 ff4 时遇到了这个问题。我有一个本地开发服务器在运行，我的 @font-face 声明工作正常。我迁移到 live 并且 FF 会在第一页加载时“闪烁”正确的类型，但是当深入导航时，字体默认为浏览器样式表。

I found the solution lay in adding the following declaration to .htaccess

我发现解决方案在于将以下声明添加到 .htaccess

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

found via

通过找到

回答by Pierre

One easy solution that no one's mentioned yet is embedding the font directly into the css file using base64 encoding.

一种尚未有人提及的简单解决方案是使用 base64 编码将字体直接嵌入到 css 文件中。

If you're using fontsquirrel.com, in the font-face Kit Generator choose expert mode, scroll down and select Base64 Encodeunder CSS Options- the downloaded Font-Kit will be ready to plug and play.

如果您使用的是 fontsquirrel.com，在 font-face Kit Generator 中选择专家模式，向下滚动并选择CSS 选项下的Base64 编码- 下载的 Font-Kit 将准备好即插即用。

This also has the fringe benefit of reducing page load time because it requires one less http request.

这还具有减少页面加载时间的附带好处，因为它需要减少一个 http 请求。

回答by niall.campbell

I'd mention that some fonts have issues in firefox if their filename contains specific characters. I've recently run into an issue with the font 'Modulus' which had a filename '237D7B_0_0'. Removing the underscores in the filename and updating the css to match the new filename solved this problem. Other fonts with similar characters don't have this issue which is very curious...probably a bug in firefox. I'd recommend keeping filenames just to alphanumeric characters.

我会提到，如果某些字体的文件名包含特定字符，则它们在 Firefox 中会出现问题。我最近遇到了字体“Modulus”的问题，该字体的文件名为“237D7B_0_0”。删除文件名中的下划线并更新 css 以匹配新文件名解决了这个问题。其他具有相似字符的字体没有这个问题，这很好奇……可能是 firefox 中的一个错误。我建议将文件名保留为字母数字字符。

回答by Casey

For this font in particular you should be using the Google Font API:

特别是对于这种字体，您应该使用 Google Font API：

http://code.google.com/webfonts/family?family=Droid+Sans

http://code.google.com/webfonts/family?family=Droid+Sans

If you still want to use FontSquirrel's kit generator, use the Smiley hack option to eliminate local font problems. After you've generated a kit, check that the generated demo.html works in FireFox. I bet it does. Now upload it to your server -- I bet it works there too since FontSquirrel is awesome.

如果您仍想使用 FontSquirrel 的工具包生成器，请使用 Smiley hack 选项来消除本地字体问题。生成工具包后，检查生成的 demo.html 是否在 FireFox 中工作。我敢打赌确实如此。现在把它上传到你的服务器——我敢打赌它也能在那里工作，因为 FontSquirrel 很棒。

However, if you broke the generated kit code while integrating it into your project, use the standard methods of debugging -- check for 404's and go line by line until you find the problem. WOFF should definitely work in FF, so thats a good place to start.

但是，如果您在将生成的工具包代码集成到您的项目中时破坏了它，请使用标准的调试方法——检查 404 并逐行检查，直到找到问题为止。WOFF 绝对应该在 FF 中工作，所以这是一个很好的起点。

Finally, if none of this works, update FireFox. I wrote all this assuming that you are using the latest; but you didn't specify what version you are checking in, so that could be your problem too.

最后，如果这些都不起作用，请更新 FireFox。我写这一切的前提是你使用的是最新的；但是您没有指定要签入的版本，因此这也可能是您的问题。