Question

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

Answer 1

我使用the 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');
}

Firefox中的Choppy .ttf字体

1 个答案: