Google chrome 版本 32.0.1700.76 m 字体问题

Question

我最近更新了 Google chrome 浏览器。我注意到一些字体没有正确呈现。在其他浏览器上似乎很好。但是这个问题只出现在 Chrome v32.0.17...76 m 中。

我使用过“Open Sans”和“Novecentowide”字体。

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

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

铬

火狐

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 上没有遇到与此字体相同的问题。