比较来自世界各地的卖家的域名和 IT 服务价格

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

. 这怎么可能? 我错过了什么?
已邀请:

风见雨下

赞同来自:

在本地运行的网站 /
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";
}

詹大官人

赞同来自:

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

我有一个问题 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";


OR


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

要回复问题请先登录注册