CSS @ font-face不支持Firefox，但使用Chrome和IE浏览器-Java 学习之路

182

以下代码适用于Google Chrome测试版以及IE 7.但是，Firefox似乎存在此问题 . 我怀疑它是如何包含我的CSS文件的问题，因为我知道Firefox对跨域导入不太友好 .

但这只是静态HTML而且不存在跨域问题 .

在我的landing-page.html上，我像这样进行CSS导入：

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

在main.css中我有另外一个这样的导入：

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

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

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

我很难过这个 . It works in Chrome and IE but not on Firefox . 这怎么可能？我错过了什么？

28 回答

17

我提到一些字体在firefox中有问题，如果它们的文件名包含特定字符 . 我最近遇到了一个问题，字体'Modulus'的文件名为'237D7B_0_0' . 删除文件名中的下划线并更新css以匹配新文件名解决了这个问题 . 其他具有相似字符的字体没有这个非常好奇的问题......可能是firefox中的一个bug . 我建议将文件名保留为字母数字字符 .

回复于 2024-04-29T14:42:29+08:00
0

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

回复于 2024-04-29T14:42:29+08:00
3

我遇到了类似的问题 . fontsquirel演示页面在FF中工作，但不是我自己的页面，即使所有文件都来自同一个域！

事实证明，我将样式表与绝对URL（http://example.com/style.css）相关联，因此FF认为它来自不同的域 . 将我的样式表链接href更改为/style.css而不是为我修复了一些东西 .

回复于 2024-04-29T14:42:29+08:00
0
我将在这里留下这个，因为我的同事找到了一个相关的“font-face不能在firefox上工作但在其他地方”问题的解决方案 .

问题只是Firefox弄乱了font-family声明，最终修复了它：
```
body{ font-family:"MyFont" !important; }
```
PS：我也在使用html5boilerplate .
回复于 2024-04-29T14:42:29+08:00
40
当地运行网站（文件：///）

默认情况下，Firefox附带了一个非常严格的"file uri origin"（ file:/// ）策略：要让它像其他浏览器一样运行，请转到 about:config ，按_1120243过滤并切换以下首选项：

security.fileuri.strict_origin_policy

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

出版网站

根据我在下面的评论，您在部署站点后遇到此问题，您可以尝试添加其他标头，以查看您的问题是否将自身配置为跨域问题：它不应该，因为您指定了相对路径，但我还是试试看：在你的.htaccess文件中，指定你想为每个请求的.ttf / .otf / .eot文件发送一个额外的 Headers ：
```
<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
```
坦率地说，我不会这么简单，值得尝试：否则尝试使用base64编码为你的字体字体，丑陋但它也可能有用 .

一个很好的回顾可用here
回复于 2024-04-29T14:42:29+08:00

除了将以下内容添加到.htaccess :(感谢@Manuel）

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

您可能想尝试将webfont mime类型显式添加到.htaccess文件中......如下所示：

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

最后，我的.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

回复于 2024-04-29T14:42:29+08:00

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

这是一个适用于firefox的解决方案的示例，您需要将此行添加到您的font face css：
```
src: local(font name), url("font_name.ttf");
```
回复于 2024-04-29T14:42:29+08:00
1
我有完全相同的问题 . 我不得不创建一个名为"fonts"的新文件夹并将其放在wp_content中 . 我可以从我的浏览器访问它 http://www.example.com/wp-content/fonts/CANDY.otf

以前，fonts文件夹与我的CSS文件位于同一目录中，@ font-face看起来像这样：
```
@font-face { 
    font-family: CANDY;
    src: url("fonts/CANDY.otf");
}
```
正如我上面提到的，这不适用于Firefox，只适用于Chrome . 现在它正在工作，因为我使用了绝对路径：
```
@font-face { 
    font-family: CANDY;
    src: url("http://www.example.com/wp-content/fonts/CANDY.otf");
}
```
回复于 2024-04-29T14:42:29+08:00
3

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

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

如果您仍想使用FontSquirrel的套件生成器，请使用Smiley hack选项消除本地字体问题 . 生成工具包后，请检查生成的demo.html是否适用于FireFox . 我打赌它确实如此 . 现在将它上传到你的服务器 - 我敢打赌它也可以在那里工作，因为FontSquirrel太棒了 .

但是，如果在将生成的套件代码集成到项目中时将其打破，请使用标准的调试方法 - 检查404并逐行进行，直到找到问题为止 . WOFF绝对应该在FF工作，所以这是一个好的起点 .

最后，如果这些都不起作用，更新FireFox . 假设您使用的是最新的，我写了这一切;但是您没有指定要签入的版本，因此这也可能是您的问题 .

回复于 2024-04-29T14:42:29+08:00
0

尝试在 @font-face 指令中使用nerfing本地源声明 .

Firefox或Google Font API中存在一个已知错误，如果字体安装在本地，并且与定义的本地名称匹配，则会阻止使用字体变体：

http://code.google.com/p/googlefontdirectory/issues/detail?id=13

要有效地nerf本地声明，只需使您的本地源字符串有些废话 . 普遍接受的惯例是使用笑脸unicode字符（ "☺" ） . 为什么？ Paul Irish在他的博客上有一个很好的解释：

http://paulirish.com/2010/font-face-gotchas/#smiley

回复于 2024-04-29T14:42:29+08:00
1
我在mac上运行ff4时遇到了这个问题 . 我有一个本地开发服务器正在运行，我的@ font-face声明工作正常 . 我迁移到live并且FF会在第一页加载时“闪烁”正确的类型，但是当导航更深时，字体默认为浏览器样式表 .

我发现解决方案在于将以下声明添加到.htaccess中
```
<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
```
发现via
回复于 2024-04-29T14:42:29+08:00
0

没有人提到的一个简单的解决方案是使用base64编码将字体直接嵌入到css文件中 .

如果您使用的是fontsquirrel.com，请在font-face Kit Generator中选择 expert mode ，向下滚动并选择 Base64 Encode 下的 Base64 Encode - 下载的Font-Kit即可即插即用 .

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

回复于 2024-04-29T14:42:29+08:00
1

您是在本地文件中还是在Web服务器上测试它？不同目录中的文件被视为跨域规则的不同域，因此如果您在本地进行测试，则可能会遇到跨域限制 .

否则，可能有助于指向出现问题的URL .

另外，我建议查看Firefox错误控制台，看看是否报告了任何CSS语法错误或其他错误 .

另外，我注意到你可能想要第二个@ font-face规则中的font-weight：bold .

回复于 2024-04-29T14:42:29+08:00
-2
当我遇到此问题时，使用.htaccess访问控制允许原因规则对我不起作用 .

相反，在web.config中的IIS中插入如下所示的system.webServer块 .
```
<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <httpProtocol>
            <customHeaders>
                <add name="Access-Control-Allow-Origin" value="*" />
            </customHeaders>
        </httpProtocol>
    </system.webServer>
</configuration>
```
这对我来说就像一个魅力 . 如果您需要限制对特定域的访问，请将*替换为域 .
回复于 2024-04-29T14:42:29+08:00
2
我在Firefox中正确显示字体时遇到了同样的问题 . 这是我发现为我工作的东西 . 在url属性中保存字体的目录之前添加斜杠 . 这是我之前和之后的版本：
```
B E F O R E:
   @font-face
{   font-family: "GrilledCheese BTN";
    src: url(fonts/grilcb__.ttf);
}

A F T E R:
@font-face
{   font-family: "GrilledCheese BTN";
    src: url(/fonts/grilcb__.ttf);
}
```
注意url中'fonts'之前的前导斜杠？这告诉浏览器从根目录开始然后访问资源 . 至少对我来说 - 解决了问题 .
回复于 2024-04-29T14:42:29+08:00
0

如果你得到一些404，你可以用firebug检查吗？我在传递中遇到了问题，我发现扩展名是相同的，但是linux file.ttf与file.TTF不同...并且它适用于除firefox之外的所有浏览器 .

希望它有所帮助！

回复于 2024-04-29T14:42:29+08:00

216

这是设置font-face路径的方法 . 由于你没有用“/”开始路径，Firefox会尝试根据样式表的路径找到字体 . 所以基本上，Firefox正在“root / css / font”目录中查找你的字体，而不是“root / font”目录 . 您可以通过将字体文件夹移动到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";
}

回复于 2024-04-29T14:42:29+08:00

-2

试试这个....

http://geoff.evason.name/2010/05/03/cross-domain-workaround-for-font-face-and-firefox/

回复于 2024-04-29T14:42:29+08:00
3
也许你的问题是一个命名问题，特别是关于空格和连字符的使用（或不使用） .

我有similair问题，我认为我通过在font- / family-names周围放置可选引号（'）来修复，但这实际上隐含地修复了命名问题 .

我并不完全了解CSS规范，并且（对我来说）在不同客户如何解释规范方面存在一些模糊性 . 此外，它似乎也与PostScript命名约定有关，但请纠正我，如果我错误！

无论如何，正如我现在所理解的那样，你的声明使用了两种可能的不同口味的混合物 .
```
@font-face {
  font-family: "DroidSerif Regular";
```
如果您考虑 Droid 实际的系列名称，其中 Sans 和 Serif 是成员，就像他们的子项 Sans Regular 或 Serif Bold ，那么您可以使用空格来连接标识符，或者删除空格并使用CamelCasing作为familyName和子标识符的连字符 .

适用于您的声明，它看起来像这样：
```
@font-face {
  font-family: "Droid Serif Regular";
```
要么
```
@font-face {
  font-family: DroidSerif-Regular;
```
我认为两者都应该完全合法，无论有没有引号，但我在各个客户之间取得了不同的成功 . 也许，有一天，我有时间弄清楚这个/这些isseu / s的细节 .

我发现这篇文章有助于理解所涉及的一些方面：http://mathiasbynens.be/notes/unquoted-font-family

本文详细介绍了PostScript的一些细节，以及Adobe规范PDF的一些链接：http://rachaelmoore.name/posts/design/css/find-font-name-css-family-stack/
回复于 2024-04-29T14:42:29+08:00
0
无需乱搞设置只需删除font-family中的引号和空格：

这个
```
body {font-family: "DroidSerif Regular", serif; }
```
变成了这个
```
body {font-family: DroidSerifRegular, serif; }
```
回复于 2024-04-29T14:42:29+08:00

就我而言，我解决了插入字体样式代码的问题

<style type="text/css">
@font-face { 
font-family: 'Amazone';font-style: normal; 
/*font-weight:100; -webkit-font-smoothing: antialiased; font-smooth:always;*/ 
src: local('Amazone'), url(font/Amazone.woff) format('woff');} 
</style>

在index.html或php页面的 Headers 中的direclty，在样式标记中 . 适合我！

回复于 2024-04-29T14:42:29+08:00

0

因此，这是此问题的Google搜索结果之一，我想添加一些解决了这个问题的方法：

我不得不从font-face的src中删除格式（opentype），然后它也在Firefox中工作 . 在此之前，它在Chrome和Safari中运行良好 .

回复于 2024-04-29T14:42:29+08:00
-2
可能不是因为你的代码，而是因为你的Firefox配置 .

试试 Tool bar Western 至 Unicode
```
View > Text Encoding > Unicode
```
回复于 2024-04-29T14:42:29+08:00
2
如果您尝试导入外部字体，则会遇到Firefox和其他浏览器最常见的问题之一 . 有些时候你的字体在谷歌浏览器或其他浏览器中运行良好但在每个浏览器中都不行 .

这种类型的错误有很多原因，这个问题背后的最大原因之一是以前的每个定义的字体 . 您需要在每行CSS代码结束后添加！important关键字，如下所示：

例：
```
@font-face
{
    font-family:"Hacen Saudi Arabia" !important;
    src:url("../font/Hacen_Saudi_Arabia.eot?") format("eot") !important;
    src:url("../font/Hacen_Saudi_Arabia.woff") format("woff") !important;
    src: url("../font/Hacen_Saudi_Arabia.ttf") format("truetype") !important;
    src:url("../font/Hacen_Saudi_Arabia.svg#HacenSaudiArabia") format("svg") !important;
}
.sample
{
    font-family:"Hacen Saudi Arabia" !important;
}
```
说明：在此处输入CSS文件或代码中的上述代码 . 在上面的示例中，将“Hacen Saudi Arabia”替换为您的font-family，并根据您的字体目录替换url .

如果在css代码浏览器中输入！important，则自动关注此部分并覆盖以前使用的属性 . 欲了解更多详情，请访问：https://answerdone.blogspot.com/2017/06/font-face-not-working-solution.html
回复于 2024-04-29T14:42:29+08:00
2
我遇到了同样的问题并通过添加内容元来解决它：
```
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
```
如果您的html中有Unicode文本，则会在Firefox和Edge中发生这种情况 .
回复于 2024-04-29T14:42:29+08:00
2

我不知道你是如何创建语法的，因为我在字体声明中使用了svg，但是Font Squirel有一个非常好的工具来从一种字体创建一个防弹语法字体 .

http://www.fontsquirrel.com/fontface/generator

回复于 2024-04-29T14:42:29+08:00
0

也可以在font-face标签的路径中使用URL . 如果您使用“http://domain.com”，它在Firefox中不起作用，因为我将其更改为“http://www.domain.com” .

回复于 2024-04-29T14:42:29+08:00
0

我的问题是Windows命名字体'font.TTF'和firefox预期'font.ttf'我看到在linux中打开我的项目后，将字体重命名为propper名称，一切正常

回复于 2024-04-29T14:42:29+08:00

CSS @ font-face不支持Firefox，但使用Chrome和IE浏览器

28 回答

当地运行网站（文件：///）

出版网站

相关问题