Question

我在我的项目中使用google.com/fonts。我需要Roboto Condensed字体。

但是在我的所有浏览器中都有一些字母以上的文物。请参阅示例（从Google页面保存）：example of issue from google-fonts

更新： this is zoomed 14px font, as you can see there is 1px dot above each letter

现在，我发现字母大尺寸正确显示，错误只有少量尺寸（12px，14px，16px，22px）。

此错误发生在我的Windows 8（FF，IE，Chrome，Safari，Opera）上的所有浏览器中。某处我发现这是因为旧的显示端口驱动程序，但我有最新的ATI驱动程序（来自2014年3月）。

而且，这个问题在某些PC上显示出来。在其他人看来，所有字体都清晰易读。

有没有人有同样的错误？如何修复它们？可能有一些CSS3技巧吗？

感谢您的帮助。

Answer 1

某些字体会导致意外渲染。大多数情况下，webkit broswers。它们有时会以不同的字体大小呈现不同的字体。如果你使用@ font-face，你可以尝试使用'Exo'字体时使用的这个技巧。我遇到了和你一样的问题，使用它解决了我的问题。并尝试从fontsquirrel生成font-face。

@font-face {
    font-family: 'exoregular';
    src: url('path to file/exo-regular-webfont.eot');
    src: url('path to file/exo-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('path to file/exo-regular-webfont.woff') format('woff'),
         url('path to file/exo-regular-webfont.ttf') format('truetype'),
         url('path to file/exo-regular-webfont.svg#exoregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

修复！只需在上面的块下面添加此块

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'exoregular';
            src: url('path to file/exo-regular-webfont.svg#exoregular') format('svg');
    }
}

CSS - font-face浏览器渲染错误

1 个答案: