css - Windows 上的 Google Chrome 上的 Lato 字体渲染

Question

我曾尝试为此寻找答案，但找不到。我已经从 www.latofonts.com 下载了 Lato webfont 并在我的 css 文件中包含以下内容:

@font-face {
    font-family: 'LatoLight';
    src: url('fonts/Lato/Lato-Light.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato/Lato-Light.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato/Lato-Light.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato/Lato-Light.ttf') format('truetype'); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato/Lato-Regular.ttf') format('truetype'); 
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

这在 Mac 上的每个浏览器(safari、chrome、firefox)和 windows 上的 firefox 上看起来都很棒，但在 chrome 和 windows 上看起来很模糊，并且缺少部分字母，例如大写“T”的顶部。有解决办法吗？

Answer 1

我也遇到过这个问题。我尝试了各种各样的事情，但最后我发现最好的解决方案是只添加一个小的 javascript 浏览器检测来添加一个 body 类。然后将任何低于 400 的字体权重覆盖为 400。出于某种原因，chrome 中窗口上的抗锯齿功能确实使细字体看起来很糟糕。