2

我正在尝试在我的博客博客上使用自定义图标字体。如果我理解正确的话，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';
}

任何帮助，将不胜感激 ：）

4

4 回答 4

3

您应该使用以下语法：

@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 博客文章，

还有Css3Please的语法

于 2012-08-24T00:23:12.387 回答
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'}
于 2012-08-24T00:38:26.703 回答
1

我刚刚下载了 Firefox 19.0.2。我在使用带有 Font Squirrel webkit 的 @font-face 时遇到了问题。字体在 Firefox 中无法正常显示，但在 Safari 和 Chrome 中正常。

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

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

这解决了我的问题，今天花了大约 4 个小时尝试了各种无效的代码更改。啊！

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

于 2013-03-10T05:13:32.630 回答
0

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

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

@Kate，使用我自己的字体的FireFox“首选项”已经是默认设置，如果不是，我会感到惊讶。

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

谢谢大家让我的一天更轻松。

于 2014-12-29T22:48:27.870 回答