css - Firefox 中不连贯的 .ttf 字体

Question

我最近开始@font-face在我的项目中使用该属性，并且它在大多数情况下都非常有效。但是，我注意到一些 .ttf 字体文件（从 Fontsquirrel.com 下载）在 Firefox 中看起来非常不稳定，但在 Chrome 中看起来很棒。我知道 .ttf 文件应该可以在 Firefox 和 Chrome 上运行，这似乎是这种情况，但断断续续很烦人。任何人都可以为这种行为提供解决方案，并且一般来说，建议一种实现跨浏览器字体的可靠方法？

Answer 1

我通过使用fontsquirrel webfont generator解决了我的问题。这是一个了不起的工具，我推荐给任何面临跨浏览器字体问题的人。此外，这样的格式在大多数情况下都有效：

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: normal;
    src: url('../content/Fonts/roboto-regular-webfont.eot');
    src: url('../content/Fonts/roboto-regular-webfont.eot?#iefix') format('embedded-opentype'),
        url('../content/Fonts/roboto-regular-webfont.woff') format('woff'),
         url('../content/Fonts/roboto-regular-webfont.ttf') format('truetype'),
         url('../content/Fonts/roboto-regular-webfont.svg#roboto-regular-webfont') format('svg');
}