Google Chrome版本32.0.1700.76 m字体问题

Question

我最近更新了Google Chrome浏览器。我注意到有些字体无法正确渲染。在其他浏览器上它看起来很好。但是，此问题仅出现在Chrome v32.0.17 ... 76 m中。

我使用过“Open Sans”＆amp; “Novecentowide”字体。

以下我用于HTML标题的CSS样式。

CSS
----

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot');
    src: url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/fonts_main/open-sans/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'novecentowide-medium-webfont';
    src: url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.eot');
    src: url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.woff') format('woff'),
         url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.ttf') format('truetype'),
         url('../fonts/fonts_main/Novecentowide-m/Novecentowide-Medium-webfont.svg#novecentowide-medium-webfont') format('svg');
    font-weight: 500;
    font-style: normal;
}


@font-face {
    font-family: 'novecentowide-normal-webfont';
    src: url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.eot');
    src: url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.woff') format('woff'),
         url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.ttf') format('truetype'),
         url('../fonts/fonts_main/Novecentowide-n/Novecentowide-Normal-webfont.svg#novecentowide-normal-webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 { font-family: 'OpenSansRegular'; } 

HTML
---------
<h1> Test on CHrome </h1>

但是，在新版本的Chrome浏览器中，字体无法正确呈现。请帮我解决这个问题。

编辑：

在Chrome上

在火狐上

• 在Chrome上
  
  ----------- 下一步方法 ---------------------- ---------------------

HTML

<h6 class="title1">This is opensans Regular</h6>
<h6 class="title2">This is opensans semibold</h6>

CSS

@font-face {
    font-family: 'OpenSansRegular';
    src: url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot');
    src: url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.woff') format('woff'),
         url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('/fonts/fonts_main/open-sans/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-style: normal;
}

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot');
    src: url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.woff') format('woff'),
         url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('/fonts/fonts_main/open-sans/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-style: normal;
}


h6.title1 {
    font-family: 'OpenSansRegular';
    font-weight: normal;
}

h6.title2 {
    font-family: 'OpenSansSemibold';;
    font-weight: 600;
}

h6.title1, h6.title2 { color: #54403C; font-size: 1.3em; }
body { font-size: 10px; }

Chrome

火狐

Answer 1

因此Chrome正常呈现正常字体，而Firefox是大胆的？

您指定的字体只有正常的重量。因此Chrome正确呈现字体，Firefox已将非粗体效果应用于非粗体字体，因为h1的默认样式是应用“粗体”。

如果你想要它们都正常：

h1 { 
    font-family: 'OpenSansRegular'; 
    font-weight: normal; /* tell all browsers not to apply faux bold */
}

或者，如果您希望它们都是粗体，请指定您拥有的半粗体：

h1 { 
    font-family: 'OpenSansSemibold'; 
    font-weight: 600;
}

使用网络字体时，这是一个常见的陷阱 - 总是在使用它们的元素上指定字体权重以避免这种情况。

修改

将text-rendering: optimizeLegibility;添加到标题样式可能有助于规范化浏览器之间的呈现。我不确定它是否解决了实际的角色渲染问题，或者只是使用了不同的字距调整算法，但值得一试。我很难对此进行测试，因为我在Chrome上没有与此字体相同的问题。