Google Chrome字体呈现

Question

我遇到了Google Chrome Canary中基本字体呈现的问题。我将字体“Proxima Nova”嵌入到我通过Typekit开发的网站上。目前这只能在本地托管，因此我必须尽我所能通过屏幕截图和代码示例展示问题。长篇小说，任何时候我使用任何webfont，谷歌浏览器加纳利（目前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，这个问题依然存在。任何人有任何线索？或者我应该不用担心，因为它只是一个开发版本？我的担心是，这可能延续到以后的版本，或者，考虑到在错误发生之前有闪烁，我想知道是否有简单的东西可以用来解决这个问题。

最后，这里是在两个加那利（左）和Chrome稳定（右）并排侧发生的截图：http://cl.ly/YFLu

Answer 1

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

问题是'-webkit-font-smoothing：antialiased'被忽略。对于那些不知道的人来说，这是一个Mac特有的属性，它用来打开和关闭子像素渲染（正如人们期望的那样），但是为了控制CoreGraphics应用于子像素消除锯齿的伪造粗体字形。在较大尺寸的情况下，这种伪造的粗体是非常明显的，因此希望在任何非正文文本上禁用它。有关更多详细信息，可以阅读www样式列表中的文字“Mac上的文本消除锯齿”，特别是this post。这次讨论是由于上次打破并在Chrome 22中保持稳定所致。

如果再次发生这种情况（Mac只有文本显得太大胆），应该打开一个Chromium bug并提及' webkit-font-smoothing：antialiased'似乎再次出现在fritz上。

Answer 2

铬（几乎）总是处于Beta字体问题。在地址栏中输入chrome://flags并启用disable directwrite，重新启动浏览器，现在一切都应该看起来不错。

顺便说一句，根据我的经验，这些字体问题总是固定在下一个稳定版本中，最有可能的FB也会看上去......大胆。