html - 谷歌浏览器字体渲染

Question

我在 Google Chrome Canary 中遇到基本字体呈现问题。我正在通过 Typekit 将字体“Proxima Nova”嵌入到我正在开发的网站上。目前这仅在本地托管，因此我必须尽我所能通过屏幕截图和代码示例来展示问题。

长话短说，每当我在 Google Chrome Canary(目前为 40.0.2202.3)中使用任何网络字体时，我的字体都渲染得太重了。简而言之，在页面加载后不到一秒的时间内，字体以正确的粗细呈现，然后在浏览器加载后的一秒内变粗。我已尝试禁用所有插件，但问题仍然存在。当我在页面上禁用 CSS 时，它的呈现与其他浏览器一致(正如人们所期望的那样)。字体在 Chrome 38 和 39 以及所有其他主要浏览器中都能正确呈现。我在 Windows 和 Mac OS 中进行了测试，结果相同。我创建了一个 codepen 来演示它，它具有网站上的确切 HTML 和 CSS:http://codepen.io/idealbrandon/pen/EGlDa

HTML

<div class="wrapper">
  <aside class="masthead">
    <h1 class="h2">Advancing Drainage through J-DRain, Grid-Guard and TurfCore.</h1>
    <p class="h3">Sed consequat pretium dictum. Viva mus blandit, turpis sed es ultrices sollicitudin, risus seme finibus ipsum, in faucibus diam dolor vel felis.</p>
  </aside>
  <main>
    This is the main section
  </main>
</div>

SASS/SCSS

// Standard Measurements
$max-width:             102.4rem;
$base-font:             1.4rem;
$baseline:              $base-font*1.5;

// Media Queries
$small-up:               "only screen and (min-width: 320px)";
$small-up2:              "only screen and (min-width: 450px)";
$medium-up:              "only screen and (min-width: 600px)";
$large-up:               "only screen and (min-width: 1050px)";

// Font Declerations
$font-body:             'proxima-nova', sans-serif;
$font-icon:             'jdr';

// Color
$black:                 #000000;
$white:                 #FFFFFF;
$gray:                  #323132;
$gray-light:            #939597;
$blue:                  #0970B8;
$green:                 #38B449;

html {
  font-size: 62.5%;
  box-sizing: border-box;
  height: 100%;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
  font: {
    family: $font-body;
    size: 1.4rem;
  }
  color: $gray;
  background-color: $white;
  line-height: $baseline;
  -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
  //text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  margin-bottom: $baseline;

  &.align-left {
    float: left;
    margin: 0 $baseline $baseline 0;
  }

  &.align-right {
    float: right;
    margin: 0 0 $baseline $baseline;
  }
}

.wrapper {
  height: 100%;
}

// Mini Reset
//// Setting type to baseline grid
p,
ul,
ol,
dl {
  margin-bottom: $baseline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $font-body;
  line-height: normal;
  font-weight: normal;
  margin: 0;
  margin-bottom: $baseline;
}

h1,
.h1 {
  font-size: 3.2rem;
  line-height: 3.6rem;

  @media #{$medium-up} {
    font-size: 3.6rem;
    line-height: 4.0rem;
  }
}

h2,
.h2 {
  font-size: 2.6rem;
  line-height: 3.0rem;

  @media #{$medium-up} {
    font-size: 2.8rem;
    line-height: 3.2rem;
  }
}

h3,
.h3 {
  font-size: 2.0rem;
  line-height: 2.4rem;

  @media #{$medium-up} {
    font-size: 1.8rem;
    line-height: 2.2rem;
  }
}

h4,
.h4 {
  font-size: 1.8rem;
  line-height: 2.2rem;

  @media #{$medium-up} {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

h5,
.h5 {
  font-size: 1.6rem;
  line-height: 2.0rem;

  @media #{$medium-up} {
    font-size: 1.2rem;
    line-height: 1.6rem;
  }
}

h6,
.h6 {
  font-size: 1.4rem;
  line-height: 1.6rem;

  @media #{$medium-up} {
    font-size: 1.0rem;
    line-height: 1.4rem;
  }
}

p,
.p {
  font-size: 1.6rem;
  line-height: $baseline;

  @media #{$medium-up} {
    font-size: 1.4rem;
    line-height: 1.8rem;
  }
}

.masthead {
  width: $baseline*20; // 420px
  background-color: $gray;
  height: 100%;
  color: $white;
  float: left;
  padding: $baseline*3 $baseline*4;
  line-height: normal;
}

main {
  background: url('build/img/city-hall.jpg') no-repeat center center fixed;
  background-size: cover;
  height: 100%;
  margin-left: $baseline*20; // This is the same distance as the width of the sidebar
}

即使通过 Codepen，这个问题仍然存在。有人在这里有任何线索吗？或者我不应该担心它，因为它只是一个开发版本？我担心这可能会延续到以后的版本，或者，考虑到错误发生前有闪烁，我想知道是否有一些简单的方法可以用来解决这个问题。

最后，这是 Canary(左)和 Chrome Stable(右)并排显示的截图:http://cl.ly/YFLu

Answer 1

这是在简化 Mac 字体后端时引入的错误。此问题在 crbug.com/435822 中被引用，问题本身已通过 crbug.com/421412 修复。 .我不相信这个错误会成为稳定版本(这次)。

问题是“-webkit-font-smoothing:antialiased”被忽略了。对于那些不知道的人，这是一个 Mac 特定属性，用于不打开和关闭子像素渲染(正如名称所期望的那样)，而是控制 CoreGraphics 应用于子像素抗锯齿的假粗体字形。在较大的尺寸下，这种假粗体非常明显，因此最好在任何非正文文本上禁用它。有关更多详细信息，可以阅读 www 样式列表“Mac 上的文本抗锯齿”上的一个主题，特别是 this post .那里的讨论是由于上次它在 Chrome 22 中崩溃并稳定下来而引起的。

如果这种情况再次发生(Mac only text seems too bold)，应该打开一个 Chromium bug 并提到“-webkit-font-smoothing:antialiased”似乎又出现了问题。