@fontface otf 和 ttf 都不适用于 Firefox，但适用于 Chrome 和 Safari答案

【问题标题】：@fontface both otf and ttf are not working at Firefox, but work with Chrome and Safari@fontface otf 和 ttf 都不适用于 Firefox，但适用于 Chrome 和 Safari
【发布时间】：2012-10-19 03:13:37
【问题描述】：

我有这个字体，我想使用它。我将它上传到我的服务器，并使用 fontface 调用它。它们在 Chrome 和 Safari 中运行良好，但在 FireFox 中则完全不行。我尝试了 .otf 和 .ttf。它们都适用于 Chrome 和 Safari，但不适用于 FireFox。他们也可以与 jsfiddle.net 一起使用。我用谷歌搜索了为什么 FireFox 会这样做，人们说如果我将 .ttf 转换为 .otf，它应该可以工作。但它现在不起作用。有人可以告诉我它有什么问题吗？

     <!doctype html>
     <html>
      <head>
      <meta charset="UTF-8">
    <title>font-test</title>
    <style>
    @font-face {font-family:Hush;  src: local(Hush),       url('http://www.yifanchen.net/temp/Hush.otf') format('opentype');}
      @font-face {font-family:Hush2;  src: local(Hush2), url('http://www.yifanchen.net/temp/hush.ttf') format('truetype');}

   .test h1.otf {font-family:Hush; color:#000;} 
   .test h1.ttf {font-family:Hush2; color:red;}
   </style>
   </head>

   <body>
    <div class="test"> 
   <h1 class="otf">This is a test for Hush.otf.</h1>
   <h1 class="ttf">This is a test for Hush.ttf</h1>
   </div>
   </body>

http://jsfiddle.net/7537247/wUvqe/ 如果您想在 FireFox 中对其进行测试，它们确实在 jsfddle 工作。您可能需要下载它。

【问题讨论】：

网页是否链接到www.yifanchen.net上的这些字体？

标签： html firefox css font-face

【解决方案1】：

在 Firefox 中，路径必须在同一个域中。如果您将 src url 设置为另一个域，Firefox 无法找到任何字体。我更改了域，它可以在 FireFox 中使用，并且在 IE 中也可以使用。只是希望这个答案也能帮助其他用户。

【讨论】：

【解决方案2】：

让字体在所有浏览器中都能正常工作是一件非常繁琐的事情，如果您还想支持 Internet Explorer，则需要一些额外的格式。如果您可以在http://fontsquirrel.com 找到相同或相似的字体，他们有一个非常简单的“字体工具包”下载，您只需将其复制到您的站点中即可。或者您可以使用他们的模板作为指导，并替换您的字体。

【讨论】：