Question

我正在尝试在我的博客博客上使用自定义图标字体。如果我理解正确，firefox要求下载文件来自同一个域。它在我的chrome上运行正常。我也使用类似工作的谷歌网络字体。我正在使用谷歌代码托管图标。

此处：http://www.tipsontricks.com/p/test.html Chorme和其他人工作但不是firefox

这是我正在使用的代码

@font-face {
    font-family: 'JustVector';
    src: url('xyz.eot');
    src: url('xyz.eot?#iefix') format('eot'),
         url('xyz.woff') format('woff'),
         url('xyz.ttf') format('truetype'),
         url('xyz#webfontkw9J4lGf') format('svg');
    font-weight: normal;
    font-style: normal;

}

.iconfont{

font-family: 'JustVector';
}

任何帮助将不胜感激：）

Answer 1

您应该使用以下语法：

@font-face {
  font-family: 'WebFont';
  src: url('myfont.eot?#') format('eot'),  /* IE6–8 */
       url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9, Chrome 6+, Safari 5.1+*/
       url('myfont.ttf') format('truetype');  /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}

这是一个不错的Paul Irish blog post，

并且Css3Please

上有语法

Answer 2

这是我使用的格式：

@font-face {
    font-family: 'Blah';
    src: url('/fonts/blah-webfont.eot');
    src: url('/fonts/blah-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/blah-webfont.woff') format('woff'),
         url('/fonts/blah-webfont.ttf') format('truetype'),
         url('/fonts/blah-webfont.svg#Blah') format('svg');
    font-weight: 300;
    font-style: normal;
}

body {font-family:'Blah'}

Answer 3

我刚刚下载了Firefox 19.0.2。我使用@ font-face和Font Squirrel webkit时遇到了问题。这些字体在Firefox中无法正常显示，但它们在Safari和Chrome中都很好。

事实证明，Firefox中有一个隐藏的首选项需要检查才能让Firefox在网页上显示自定义字体。

Firefox首选项＆gt;内容＆gt;字体＆amp;颜色＆gt;高级按钮＆gt;并选中“允许网页使用自己的字体，而不是上面的选择”框

这为我解决了这个问题，今天花了大约4个小时尝试了各种不起作用的代码更改。 Aaargh！

现在Firefox显示的字体与Safari和Chrome相同。

Answer 4

上述答案在FF中仍然不适合我，但是，我的字体在所有其他浏览器中都有效。

Google Webfonts与我一直在寻找相同的字体，但质量却低得离谱。

@Kate， FireFox＆＃34; Prefences＆＃34;使用我自己的字体已经是默认的，如果不是这样我会感到惊讶。

对我来说，这仍然是一个谜，为什么像FF这样的开发浏览器即使在2年后也无法解决问题。我的FireFox是最新的。

谢谢大家让我的日子变得更轻松。

firefox @ font-face不起作用

4 个答案: