CSS - font-face浏览器渲染错误-Java 学习之路

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

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

UPDATE: 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技巧吗？

谢谢你的帮助 .

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;
}

The fix ! simply ADD this block BELOW the above block

@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');
    }
}

回复于 2024-05-04T19:56:58+08:00

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

1 回答

相关问题