CSS @font-face S.不起作用 Firefox, 但是工作。 Chrome 和 IE

以下代码在beta中工作 Google Chrome, 和 IE 7. 但是，U. Firefox, 看起来这个问题有问题。我怀疑这是我的文件是如何包含的问题。 CSS, 因为我知道 Firefox 不太友好适用于Interdomen进口。

但这只是静态 HTML, 而且没有疑问。

在我的Landing-Page.html上我会进口 CSS 像这样：

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

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

我有一个叫做的目录 "font" 在同一个地方 type.css. 此字体目录包含所有文件。 woff/ttf/svg 等等。

这次我在一个死胡同。

它起作用B. Chrome 和 IE, 但不是 Firefox

. 这怎么可能？我错过了什么？

已邀请:

25 个回复

风见雨下

赞同来自:

在本地运行的网站 /

file:///

/

Firefox 附带一个非常严格的政策 "file uri origin" /

file:///

/ 默认情况下：要像其他浏览器一样导致自己，转到

about:config

, 过滤

fileuri

并切换以下首选项：

security.fileuri.strict_origin_policy

设置值

false

, 您可以在不同级别的路径中上传本地字体资源。

在现场发布

根据我的评论下面，你在部署网站后遇到这个问题，你可以尝试添加一个额外的标题，看看你的问题是否被配置为跨域问题：它不应该是，因为你指定了相对路径，但我不在乎我尝试过：在你的文件中 .htaccess 指定要为每个请求的文件发送其他标题。 .ttf/.otf/.eot:

<filesmatch "\.="" $"="" ttf|otf|eot="">

<ifmodule mod_headers.c="">

 Header set Access-Control-Allow-Origin "*"

 </ifmodule>

</filesmatch>

老实说，我不会指望它有一些，但它很容易尝试：仍然尝试使用

编码

base64 为您的字体字体，丑陋，但它也可以工作。

良好的评论可用
http://geoff.evason.name/2010/ ... efox/

小明明

赞同来自:

除了将以下内容添加到您的文件中。 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

三叔

赞同来自:

我也有这样的问题。我在这里找到了答案：
http://www.dynamicdrive.com/fo ... 63628
这是适用的解决方案的示例 firefox, 您需要将此字符串添加到字体上 face css:

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

石油百科

赞同来自:

我会在这里离开它，因为我的同事找到了与这个问题有关的解决方案 "font-face not working on firefox but everywhere else".

问题只是那样 Firefox 我宠坏了字体家族的宣布，这导致了他的修正：

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

PS: 我也使用了 html5boilerplate.

裸奔

赞同来自:

我有同样的问题。仔细检查您的代码 H1, H2 或者您使用规则导向的任何其他风格 @font-face. 我发现我之后缺乏昏迷

font-family: 'custom-font-family' Arial, Helvetica etc

除了除了每一个浏览器之外，他完全展示了 Firefox. 我添加了某人，它的工作。

裸奔

赞同来自:

我有同样的问题。我不得不创建一个名为的新文件夹 "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, 但只有S. Chrome. 现在他工作，因为我使用了绝对路径：

@font-face { 

 font-family: CANDY;

 src: url/"[url=http://www.example.com/wp-content/fonts/CANDY.otf"/;]http://www.example.com/wp-cont ... B/%3B[/url]

}

卫东

赞同来自:

启动时我有完全解决问题 ff4 在 mac. 我已经推出了一个本地开发服务器，以及我的声明 @font-face 工作好。我迁移了B. live, 和 FF 将 'flash' 加载第一页时正确的类型，但在移动更深时，默认字体转到浏览器样式表。

我发现该决定是加入以下公告 .htaccess

<filesmatch "\.="" $"="" ttf|otf|eot="">

<ifmodule mod_headers.c="">

 Header set Access-Control-Allow-Origin "*"

 </ifmodule>

</filesmatch>

成立
http://doctype.com/anyone-clue ... -name

冰洋

赞同来自:

一个简单的决定，没有人提到过 - 这是将字体直接嵌入到文件中。 css 使用编码 base64.

如果您正在使用 fontsquirrel.com, 在发电机里 font-face Kit 选择

expert mode

, 向下滚动并选择

Base64 Encode

在部分

CSS Options

- 下载了 Font-Kit 将准备好连接和播放。

它在减少页面加载时间时也具有额外的优势，因为这需要一个请求较少 http.

郭文康

赞同来自:

我会提到一些字体有问题 firefox, 如果它们的文件名包含某些字符。我最近面临着字体的问题 'Modulus', 谁有文件名 '237D7B_0_0'. 删除文件名和更新中的下划线 css 按照新文件名，解决此问题。具有类似符号的其他字体没有这个问题非常 curious...probably 一个错误 firefox. 我建议仅通过字母数字字符保存文件名。

石油百科

赞同来自:

尝试 nerfing 在指令中公布本地来源

@font-face

.

有一个众所周知的错误 Firefox 或者 Google Font API, 如果字体在本地安装并符合特定的本地名称，则不允许使用字体选项：

http://code.google.com/p/googl ... %3D13
有效地 nerf 本地公告，只需将您的本地源字符串带入一些废话。普遍接受的协议是使用表情符号 unicode character /

"☺"

/. Why? 伊利亚地板在他的博客中有一个很好的解释：

http://paulirish.com/2010/font ... miley

卫东

赞同来自:

对于此字体，特别是您必须使用 Google Font API:

http://code.google.com/webfont ... BSans
如果您仍然想要使用集合生成器 FontSquirrel, 使用选项 Smiley hack, 消除字体的局部问题。生成一组后，确保生成的 demo.html 适用于 FireFox. 我打赌，所以它是。现在将它下载到您的服务器。 - 我打赌，它也在那里工作，因为Fontsquirrel很棒。

但是，如果在将生成的套件代码集成到项目时，请使用标准调试方法 - 检查404s的存在并运行字符串字符串，直到找到问题。 WOFF 绝对工作 FF, 所以这是一个很好的开始。

最后，如果这一点不起作用，更新 FireFox. 我写了这一切，假设你使用最新版本; 但是您没有指定您检查的版本，所以它也可能是您的问题。

詹大官人

赞同来自:

您是否在本地文件中或从Web服务器测试？不同目录中的文件被视为Interdomalizated规则的不同域，因此如果您在本地测试，您可能会遇到国际限制。

否则，指示可能很有用 URL, 出现问题的地方。

此外，我会建议看着控制台 Firefox error, 找出是否有任何句法错误 CSS 或其他错误。

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

奔跑吧少年

赞同来自:

使用规则 .htaccess Access Control Allow Origin 当我遇到这个问题时，我对我不起作用。

而是b。 IIS 在 web.config 插入块 system.webServer, 如下所示。

xml version="1.0" encoding="utf-8"?

<configuration>

<system.webserver>

<httpprotocol>

<customheaders>

<add name="Access-Control-Allow-Origin" value="*"></add>

</customheaders>

</httpprotocol>

</system.webserver>

</configuration>

它会影响我作为一个咒语。如果您需要限制对特定域的访问，请替换 * 域名。

龙天

赞同来自:

获取适当显示的字体我的问题相同 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/;

}

注意之前的领先懈怠 'fonts' 在 url? 它告诉浏览器从根目录开始，然后访问资源。至少对于我来说 - 问题已经解决了。

诸葛浮云

赞同来自:

如果您正在尝试导入外部字体，则遇到您的最常见问题之一 Firefox 还有另一个浏览器。有一段时间，你的字体适用于 google Chrome 或其他一个浏览器，但不在每个浏览器中。

这种错误有很多原因。这个问题的最大原因之一是先前的明确字体。您需要添加一个关键字 !important 完成每行代码后 CSS, 如下所示：

例子：

@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" 在您的家庭字体上并更换 url 按照您的字体目录。

如果你进入 !important 在其代码中 css, 浏览器将自动关注此部分并覆盖以前使用的属性。
有关更多信息，请访问该网站：
https://answerdone.blogspot.co ... .html

裸奔

赞同来自:

你能检查吗？ firebug, 如果你得到一些 404? 我的通行证有问题，我发现扩张是一样的，但 linux file.ttf 不同于 file.TTF... 它与所有浏览器合作 firefox.

遗憾的是它没有帮助！

董宝中

赞同来自:

这是您如何配置字体路径的问题。因为你没有开始"/", 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";

}

君笑尘

赞同来自:

试试这个....

http://geoff.evason.name/2010/ ... efox/
/

詹大官人

赞同来自:

也许你的问题是命名的问题，特别是在使用方面 /或不/ 差距和连字符。

我有一个问题 similair, 我以为我通过放置来解决

选修的

引号 / ' / 大约 font-/family-names, 但实际上它隐含地纠正了命名的问题。

我真的不是 up-to-date 在规范中 CSS, 并且是 /至少对于我来说/ 不同客户如何解释规范的一些歧义。此外，它似乎也与命名协议有关 PostScript, 但如果我错了，请纠正我！

无论如何，正如我现在所理解的，您的声明使用两种可能的不同口味的混合。

@font-face {

 font-family: "DroidSerif Regular";

如果你认为

Droid.

实际上是家庭名称，哪个

Sans

和

serif

是成员，比如他们的孩子

常规网站

或胖子

字体 , 然后你要么在任何地方使用空格 concatinate 身份标识 OR 您将删除空格和使用 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 ... tack/
/

八刀丁二

赞同来自:

您不需要混淆设置，只需从字体系列中删除引号和空白：

这

body {font-family: "DroidSerif Regular", serif; }

这将是

body {font-family: DroidSerifRegular, serif; }

快网

赞同来自:

我有一个类似的问题。演示页面 fontsquirel 工作B. FF, 但不是在我自己的页面上，尽管所有文件从一个域进行了！

事实证明，我用绝对捆绑了我的风格表 URL /http://example.com/style.css/, 所以 FF 以为她来自另一个领域。更改我的链接样式表 href 在 /style.css 相反，我为我纠正了一切。

小明明

赞同来自:

在我的情况下，我遇到了一个问题插入代码插入 font-face

<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>

direclty 在您的页面上的标题中 index.html 或者 php, 在风格标记。
适用于我！

八刀丁二

赞同来自:

因此，这是最好的结果之一。 Google 对于这个问题，我想补充一下，我为我解决了这个问题：

我不得不删除格式 /opentype/ 的 src font-face, 然后他工作了 Firefox. 在那之前，他完全锻炼身体 Chrome 和 Safari.

八刀丁二

赞同来自:

也许它不是因为你的代码，而是因为你的配置 Firefox.

尝试这样做

Tool bar

Western

到

Unicode

View > Text Encoding > Unicode

卫东

赞同来自:

我有同样的问题，我通过添加仪表来决定它的内容：

<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>

<meta content="utf-8" http-equiv="encoding"/>

这发生在 Firefox 和 Edge, 如果你有文字 Unicode 在你的 html.

要回复问题请先登录或注册

CSS @font-face S.不起作用 Firefox, 但是工作。 Chrome 和 IE

25 个回复

发起人

相关问题

问题状态

CSS @font-face S.不起作用 Firefox, 但是工作。 Chrome 和 IE

与内容相关的链接

25 个回复

发起人

相关问题

问题状态