我的问题是在Google Chrome Canary基础字体渲染方面遇到了一些问题。我通过Typekit将Proxima Nova字体嵌入到我正在开发的网站中。目前，该字体仅本地托管，因此我将尽力通过截图和代码示例显示问题。
长话短说，在Google Chrome Canary（当前版本为40.0.2202.3）中，每当我使用任何Web字体时，我的字体都会渲染得过于粗重。简而言之，在页面加载不到一秒钟的时间内，字体以正确的厚度呈现，然后它会在浏览器加载后的一秒钟内变得更胖。我已经尝试禁用所有插件，但问题仍然存在。当我在页面上禁用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
font-weight。 - DividedByZero