Question

我有这个字体，我想用它。我将它上传到我的服务器，并使用fontface来调用它。它们在Chrome和Safari上运行良好，但在FireFox中完全没有。我试过.otf和.ttf。它们都适用于Chrome和Safari，但不适用于FireFox。他们也与jsfiddle.net合作。我用Google搜索为什么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中工作。您可能需要下载它。

Answer 1

在Firefox中，路径必须处于相同的主导地位。如果您将src url设置为另一个版本，Firefox无法找到任何字体。我改变了主导，它适用于FireFox，它也可以在IE中运行。希望这个答案也可以帮助其他用户。

Answer 2

让字体在所有浏览器中运行非常繁琐，如果您还想支持Internet Explorer，还需要一些其他格式。如果您可以在http://fontsquirrel.com找到相同或相似的字体，则可以使用非常简单的“font-face kit”下载，只需将其复制到您的网站即可。或者您可以使用他们的模板作为指南，并替换您的字体。

@fontface otf和ttf都不能在Firefox上运行，但可以使用Chrome和Safari

2 个答案: