Windows上Google Chrome中Lato字体的渲染

Question

我很努力地搜索了答案，但没有找到。我从 www.latofonts.com 下载了 Lato 网页字体，并将以下内容放在我的 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”的顶部。是否有解决方法？

- user3498976

---

尝试使用“-webkit-font-smoothing: antialiased;” - imbondbaby

你能给我们展示一张截图或创建一个JSFiddle演示吗？ - Tiago Marinho

Answer 1

我也遇到了这个问题。我尝试了各种方法，但最终发现最好的解决办法是添加一个小的JavaScript浏览器检测，添加一个body类。然后将任何低于400的字重覆盖为400。由于Windows中Chrome上的抗锯齿技术会让细字体看起来很糟糕。

- deweydb

Answer 2

我回答了这个问题。我添加了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是什么。

- user3498976