我遇到了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/EGlDaGoogle Chrome字体呈现
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
尝试使用'font-weight'的数字值 – DividedByZero 2014-10-28 18:19:12
感谢您的建议@RandomUser。不幸的是,这并没有解决这个错误。 – idealbrandon 2014-10-28 18:21:55