如何在 Firefox 中正确呈现 @font-face？答案

【问题标题】：How to properly render @font-face in Firefox?如何在 Firefox 中正确呈现 @font-face？
【发布时间】：2013-01-16 01:11:27
【问题描述】：

我正在尝试将@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 文件并再次重写名称，那么它会呈现它。此外，字体文件在我的服务器上，我在同一个域上渲染它。所以不确定这里出了什么问题。

【问题讨论】：

你也可以试试 FontSquirrel 字体生成器fontsquirrel.com/fontface/generator
字体的 URL 必须是相对的才能在 Firefox 上运行，或者您可以配置您的服务器以允许访问它们。

标签： html css font-face webfonts

【解决方案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

【讨论】：

【解决方案2】：

这不是广告：D

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

【讨论】：