CSS @ font-face不适用于Firefox，但是可以使用Chrome和IE
以下代码适用于Google Chrome beta以及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文件等
我被困在这一个。 它适用于Chrome和IE，但不适用于Firefox 。 这怎么可能？ 我错过了什么？
本地运行网站（ file:/// ）
Firefox默认情况下有一个非常严格的“file uri origin”（ file:/// ）策略：要使其像其他浏览器一样运行，请转到about:config ，按fileuri过滤并切换以下首选项：
security.fileuri.strict_origin_policy
将其设置为false ，您应该能够跨不同的path级别加载本地字体资源。
已发布的网站
根据我下面的评论，在部署站点后遇到了这个问题，您可以尝试添加一个额外的标头，以查看您的问题是否将自身configuration为跨域问题：不应该，因为您正在指定相对path，但我会试一试：在你的.htaccess文件中，指定你想为每个.ttf / .otf / .eot文件发送一个额外的头文件被请求：
<FilesMatch "\.(ttf|otf|eot)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
坦率地说，我不希望它有任何区别，但它是如此简单，值得尝试：否则尝试使用base64编码为您的字体，丑陋，但它也可以。
这里有一个很好的回顾
除了将以下内容添加到.htaccess之外:(谢谢@Manuel）
<FilesMatch "\.(ttf|otf|eot)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
你可能想尝试显式地添加webfont mimetypes到.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
我也有这个问题。 我在这里find答案： http : //www.dynamicdrive.com/forums/showthread.php?t=63628
这是一个在Firefox上工作的解决scheme的例子，你需要将这一行添加到你的字体css：
src: local(font name), url("font_name.ttf");
我有完全一样的问题。 我不得不创build一个名为“字体”的新文件夹，并将其放在wp_content中。 我可以像我这样的http://www.example.com/wp-content/fonts/CANDY.otf从我的浏览器访问它
以前，字体文件夹和我的CSS文件在同一个目录下，@ font-face看起来像这样：
@font-face { font-family: CANDY; src: url("fonts/CANDY.otf"); }
正如我上面提到的，这不是在Firefox中工作，但只与Chrome。 现在它正在工作，因为我使用了一个绝对path：
@font-face { font-family: CANDY; src: url("http://www.example.com/wp-content/fonts/CANDY.otf"); }
我只是把这个留在这里，因为我的同事find了一个相关的“字体不工作在Firefox上，但在其他地方”的问题的解决scheme。
问题是Firefox搞乱了font-family声明，最后修复了这个问题：
body{ font-family:"MyFont" !important; }
PS：我也在使用html5boilerplate。
我会提到，如果一些字体的文件名包含特定的字符，则在Firefox中有一些问题。 我最近遇到了一个问题，字体'模数'有一个文件名'237D7B_0_0'。 删除文件名中的下划线和更新CSS来匹配新的文件名解决了这个问题。 其他字体相似字符没有这个问题，这是非常好奇的…可能是一个在Firefox的错误。 我build议保持文件名只是字母数字字符。
我遇到了同样的问题。 用@ font-face规则仔细检查你的代码是H1，H2还是你想要的样式。 我发现在font-family: 'custom-font-family' Arial, Helvetica etc之后我错过了一个昏迷font-family: 'custom-font-family' Arial, Helvetica etc它在Firefox以外的每个浏览器中都显示得很好。 我添加了昏迷，它的工作。
对于这种字体，特别是你应该使用Google Font API：
http://code.google.com/webfonts/family?family=Droid+Sans
如果您仍想使用FontSquirrel的套件生成器，请使用Smiley hack选项来消除本地字体问题。 生成工具包之后，请检查生成的demo.html是否在FireFox中工作。 我敢打赌，确实如此。 现在把它上传到你的服务器 – 我敢打赌，它在那里工作，因为FontSquirrel真棒。
但是，如果在将其集成到项目中时生成的套件代码被破坏，请使用标准的debugging方法 – 检查404的代码并逐行进行，直到find问题。 WOFF肯定应该在FF中工作，所以这是一个很好的开始。
最后，如果这些都不起作用，请更新FireFox。 我假设你正在使用最新的，我写了所有这些; 但是你没有指定你正在login的版本，所以这也可能是你的问题。
尝试在@font-face指令中修改本地的源代码声明。
Firefox或Google Font API中存在一个已知的错误，如果字体安装在本地，并且与所定义的本地名称匹配，则会阻止使用字体变体：
http://code.google.com/p/googlefontdirectory/issues/detail?id=13
为了有效地削弱本地声明，只要让你的本地源代码string一些废话。 一般公认的惯例是使用笑脸Unicode字符（ "☺" ）。 为什么？ 保罗·爱尔兰在他的博客上有一个很好的解释：
我有这个问题在Mac上运行ff4。 我有一个本地开发服务器运行，我的@ font-face声明工作正常。 我迁移到现场，FF会在首页加载时“闪烁”正确的types，但是当浏览更深时，字体默认为浏览器样式表。
我发现解决scheme是将下面的声明添加到.htaccess
<FilesMatch "\.(ttf|otf|eot)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch>
通过发现
一个简单的解决scheme，没有人提到的是使用base64编码将字体直接embedded到css文件中。
如果您使用的是fontsquirrel.com，请在font-face Kit Generator中select专家模式 ，向下滚动并selectCSS Options下的Base64 Encode – 下载的Font-Kit将可以即插即用。
这也有减less页面加载时间的附带好处，因为它需要less一个http请求。
你在本地文件或Web服务器上testing这个吗？ 不同目录中的文件被认为是跨域规则的不同域，所以如果你在本地testing，你可能会遇到跨域限制。
否则，可能会帮助指出出现问题的URL。
另外，我build议看看Firefox错误控制台，看看是否有任何CSS语法错误或其他错误报告。
另外，我会注意到你可能想在第二个@ font-face规则中使用font-weight：bold。
使用.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>
这对我来说就像一个魅力。 如果您需要限制对特定域的访问，请将*replace为域。
我有一个相同的问题，让一个字体在Firefox中正确显示。 这是我发现为我工作。 在url属性中保存字体的目录前添加一个斜杠。 这是我的前后版本：
BEFORE: @font-face { font-family: "GrilledCheese BTN"; src: url(fonts/grilcb__.ttf); } AFTER: @font-face { font-family: "GrilledCheese BTN"; src: url(/fonts/grilcb__.ttf); }
请注意url中'字体'之前的前导斜杠？ 这告诉浏览器从根目录开始，然后访问资源。 至less对我来说 – 解决问题。
你可以检查萤火虫，如果你得到一些404？ 我在通过的问题，我发现扩展是相同的，但Linux的file.ttf是不同于file.TTF …它适用于除Firefox以外的所有浏览器。
希望它有帮助！
这是如何设置字体的path的问题。 由于您没有使用“/”开始path，Firefox会尝试根据样式表所在的path来查找字体。所以基本上，Firefox正在“root / css / font”目录中查找您的字体，而不是“根/字体”目录。 您可以通过将字体文件夹移动到css文件夹，或者将/添加到字体path的开头来轻松解决此问题。
试试这个：
@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"; }
我有一个类似的问题。 fontsquirel演示页面在FF中工作，但不是我自己的页面，即使所有文件都来自同一个域！
事实certificate，我正在链接我的样式表绝对的URL（http://example.com/style.css）所以FF认为它来自一个不同的领域。; 改变我的样式表链接href到/style.css而不是固定的东西给我。
也许你的问题是一个命名问题，特别是关于空格和连字符的使用（或不使用）。
我有类似的问题，我认为我已经通过在字体/家族名称周围放置可选引号（'）来解决问题，但实际上隐含地解决了一个命名问题。
我并没有完全掌握CSS规范，并且（在我看来）在不同的客户端如何解释规范方面存在一些模棱两可的问题。 此外，它也似乎与PostScript命名惯例有关，但如果我错了，请纠正我！
无论如何，正如我现在明白，你的声明是使用两种可能的不同口味的混合物。
@font-face { font-family: "DroidSerif Regular";
如果您认为Droid是Sans和Serif成员的实际家族名称，就像他们的孩子Sans Regular或Serif Bold一样 ，那么您可以使用空格来标识标识符，或者删除空格并使用CamelCasing for 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/
不需要搞乱设置，只需从font-family中删除引号和空格：
这个
body {font-family: "DroidSerif Regular", serif; }
变成这个
body {font-family: DroidSerifRegular, serif; }
在我的情况下，我解决了插入字体样式代码的问题
<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页面的标题中，在style标签中。 为我工作！
因此，这是这个问题的谷歌最重要的结果之一，我想补充什么解决了这个问题对我来说：
我不得不从font-face的src中删除格式（opentype），然后它在Firefox中工作。 在Chrome和Safari之前，它运行良好。
可能是因为你的代码，而不是你的Firefoxconfiguration。
尝试从Tool bar 西方到Unicode
View > Text Encoding > Unicode
我不知道你是如何创build语法的，因为我在字体声明中使用了svg，但是Font Squirel有一个非常好的工具来从一个字体创build一个防弹的语法字体。
也可以使用font-face标签path中的URL。 如果你使用“http://domain.com”它不起作用的Firefox，我改变它“http://www.domain.com”工作。;
我的问题是，Windows命名字体“font.TTF”和Firefox预计'font.ttf'我看到，在Linux中打开我的项目后，更名为字体propper名称，一切正常
