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上看起来都很棒但是它在窗口上看起来很模糊，并且缺少部分字母，例如资本“T”的顶部。有没有解决这个问题？

Answer 1

我也有这个问题。我尝试了各种各样的东西，但最后我发现最好的解决方案是只添加一个javascript浏览器检测，添加一个body类。然后覆盖400以下的任何字体权重为400.由于某种原因，Chrome中的窗口上的抗锯齿确实使得瘦字体看起来很糟糕。

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

为了知道在＆＃34;＃＆＃34;之后你需要放什么你必须打开svg文件才能看到id是什么

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

2 个答案: