css - 为什么字体在 Firefox 中不起作用？

Question

我正在使用字体，它在 Safari 和 Chrome 中渲染得很好，但在 Firefox 中却没有。

@font-face {
    font-family: 'franchiseregular';
    src: url('franchise-bold-webfont.eot');
    src: url('franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('franchise-bold-webfont.woff') format('woff'),
         url('franchise-bold-webfont.ttf') format('truetype'),
         url('franchise-bold-webfont.svg#franchiseregular') format('svg');
    font-style: normal;
}

h1 { 
font-family: 'franchiseregular', Helvetica, 'Helvetica Neue', Arial, sans-serif; 
}

Answer 1

Firefox 倾向于使用 woff 文件类型。您可能需要确保您的 Web 服务器设置为提供 woff 文件。您可以使用 mime 类型在服务器级别实现此目的，或者将以下内容添加到您的 Web 配置中。

<system.webServer>
   <staticContent>
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
   </staticContent>
</system.webServer>