Question

我正在尝试将@ font-face用于Chrome，Safari，Firefox和IE。对于IE我甚至不知道该怎么做，但对于其他浏览器我想要@ font-face部分工作。

这是我用过的：

  @font-face {
  font-family: "Handwriter";
  src: url("/folder/Font-Regular.otf");
  }

然后我也试过了：

 @font-face {
 font-family: "Handwriter";
 src: url("http://www.domain.com/folder/Font-Regular.otf");
 }

使用其中任何一种都可以在Chrome和Safari中正确呈现，但不能在Firefox中呈现。有趣的是，如果我使用Firebug并转到CSS文件并再次重写该名称，那么它将呈现它。此外，字体文件在我的服务器上，我在相同的域上将其删除。所以不确定这里出了什么问题。

Answer 1

试试这个（使用自定义字体）。请记住格式很重要：

@font-face {
  font-family: 'WebFont';
  src: 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+ */
}

来源：css3please

Answer 2

这不是广告：D

我成功使用http://www.fontsquirrel.com/fontface生成器:)如果你有z ttf文件，剩下的就是小菜一碟了：）

如何在Firefox中正确渲染@ font-face？

2 个答案: