html - Google chrome 版本 32.0.1700.76 m 字体问题

Question

我最近更新了 Google chrome 浏览器。我注意到有些字体没有正确呈现。在其他浏览器上它似乎很好。然而，此问题仅出现在 Chrome v32.0.17...76 m 中。

我用过“Open Sans”和“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 上没有遇到与此字体相同的问题。