我在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
答案 0 :(得分:2)
这是在简化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上。
答案 1 :(得分:0)
Chrome(几乎)在Beta中总是存在字体问题。在地址栏中输入chrome://flags
并启用disable directwrite
,重新启动浏览器,现在一切都应该正常。