Question

我在Google Chrome Canary中遇到基本字体渲染问题。我将字体“Proxima Nova”嵌入到我通过Typekit开发的网站上。目前只在本地托管，因此我将尽力通过屏幕截图和代码示例来展示问题。

长话短说，任何时候我使用任何webfont，在谷歌Chrome Canary（目前40.0.2202.3），我的字体渲染方式太重了。简而言之，在页面加载后不到一秒钟，字体以正确的厚度呈现，然后它将在浏览器加载的一秒内增长。我试过禁用所有插件，问题仍然存在。当我在页面上禁用CSS时，它会与其他浏览器一致呈现（正如人们所期望的那样）。字体在Chrome 38＆amp ;; 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只有文字看起来过于大胆），那么应该打开一个Chromium bug，并提一下'-webkit-font-smoothing：antialiased'似乎再次出现在fritz上。

Answer 2

Chrome（几乎）在Beta中总是存在字体问题。在地址栏中输入chrome://flags并启用disable directwrite，重新启动浏览器，现在一切都应该正常。

BTW根据我的经验，这些字体问题总是在下一个稳定版本中修复，很可能FB也会看起来......更大胆。 enter image description here

谷歌Chrome字体渲染

2 个答案: