Css Windows上Google Chrome上的Lato字体渲染

我试着寻找这个问题的答案，但找不到答案。我已从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上的每个浏览器上都很好，但在windows上的chrome上看起来很模糊，并且缺少字母的部分，例如大写字母“T”的顶部。有解决办法吗

我回答了这个问题。我添加了svg文件和以下代码：

@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');
         url('fonts/Lato/Lato-Light.svg#LatoLight') format('svg');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'LatoLight';
        src: url('fonts/Lato/Lato-Light.svg#latolight') format('svg');
    }
}

---

为了知道在“#”之后必须放什么，必须打开svg文件以查看id是什么

我也遇到了这个问题。我尝试了各种方法，但最终我发现最好的解决方案是只添加一点javascript浏览器检测，添加一个body类。然后将低于400的字体权重覆盖为400。由于某些原因，chrome中windows上的抗锯齿功能确实让薄字体看起来很糟糕。

试试

-webkit字体平滑：抗锯齿