Google Chrome字体呈现 [英] Google Chrome Font Rendering
问题描述
我在Google Chrome Canary中遇到了基本字体呈现问题。我将字体Proxima Nova嵌入到我通过Typekit开发的网站上。目前这只是本地托管，所以我将不得不通过截图和代码示例来展示问题。
长话短说，任何时候我使用任何webfont在Google Chrome Canary（目前为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>通过J-DRain，Grid-Guard和TurfCore提升排水量< / h1>
< p class =h3> Sed consequat pretium dictum。 Vau mus musy blandit，葡萄柚，葡萄柚，葡萄柚，葡萄柚等。< / p>
< / aside>
< main>
这是主要部分
< / main>
< / div>
SASS / SCSS
//标准测量值
$ max-width：102.4rem;
$ base-font：1.4rem;
$ baseline：$ base-font * 1.5;
//媒体查询
$ small-up：only screen and（min-width：320px）;
$ small-up2：只有屏幕和（最小宽度：450px）;
$ medium-up：只有屏幕和（最小宽度：600px）;
$ large-up：只有屏幕和（最小宽度：1050px）;
//字体清理
$ font-body：'proxima-nova'，sans-serif;
$ font-icon：'jdr';
//颜色
$黑色：＃000000;
$ white：#FFFFFF;
$ grey：＃323132;
$ gray-light：＃939597;
$ blue：＃0970B8;
$ green：＃38B449;
html {
font-size：62.5％;
box-sizing：border-box;
身高：100％;
}
*，
* :: before，
* :: after {
margin：0;
padding：0;
box-sizing：inherit;
}
body {
margin：0;
padding：0;
身高：100％;
字体：{
系列：$ font-body;
size：1.4rem;
}
颜色：$ gray;
background-color：$ white;
line-height：$ baseline;
-moz-osx-font-smoothing：grayscale;
-webkit-font-smoothing：antialiased;
// text-rendering：optimizeLegibility;
}
img {
最大宽度：100％;
height：auto;
margin-bottom：$ baseline;
& .align-left {
float：left;
保证金：0 $基准$基准0;
}
& .align-right {
float：right;
保证金：0 0 $基准$基准;
}
}
.wrapper {
height：100％;
}
//迷你重置
////设置类型为基线网格
p，
ul，
ol，
dl {
margin-bottom：$ baseline;
}
h1，
h2，
h3，
h4，
h5，
h6 {
字体-family：$ font-body;
line-height：normal;
font-weight：normal;
保证金：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;
身高：100％;
颜色：$白色;
float：left;
填充：$基线* 3 $基线* 4;
line-height：normal;
}
main {
background：url（'build / img / city-hall.jpg'）no-repeat center center fixed;
background-size：cover;
身高：100％;
保证金余额：$ baseline * 20; //这与边栏的宽度相同
}
即使通过Codepen ，这个问题依然存在。任何人有任何线索？或者我应该不用担心，因为它只是一个开发版本？我担心这可能会延续到更高版本，或者考虑到错误发生之前有闪烁，我想知道是否有简单的东西可以用来解决这个问题。
最后，下面是Canary（左）和Chrome Stable（右）并排发生的截图： http://cl.ly/YFLu
这是一个在简化Mac字体后端。此问题在crbug.com/435822中引用，并且问题本身已通过得到解决。我不相信这个bug使它成为一个稳定版本（这次）。 问题在于'-webkit-font-smoothing：antialiased'被忽略。对于那些不知道的人来说，这是一个Mac特有的属性，它用来打开和关闭子像素渲染（正如人们期望的那样），但是为了控制CoreGraphics应用于子像素消除锯齿的伪造粗体字形。在较大尺寸的情况下，这种伪造的粗体是非常明显的，因此希望在任何非正文文本上禁用它。有关更多详细信息，可以阅读www风格列表中的文字Mac上的文本消除锯齿，特别是这篇文章。这次讨论是由于上次破解并在Chrome 22中保持稳定而产生的。 如果再次发生这种情况（Mac只是文本看起来太粗暴），人们应该打开一个Chromium bug并且提到'-webkit-font-smoothing：antialiased'似乎再次出现在fritz上。 I am encountering an issue with basic font rendering in Google Chrome Canary. I am embedding the typeface "Proxima Nova" onto a site I am developing via Typekit. Currently this is only hosted locally, so I will have to do my best to show the issue through screenshots and code samples. Long story short, any time I use any webfont, in Google Chrome Canary (currently 40.0.2202.3), my fonts are rendering way too heavy. Briefly, for less than a second after page load, the font is rendered at the correct thickness and then it will fatten up within a second of the browser load. I have tried disabling all plugins and the issue still exists. When I disable CSS on the page, it renders consistently with other browsers (as one would expect). Fonts render properly in Chrome 38 & 39, as well as all other major browsers. I have tested in both Windows and Mac OS with the same results. I created a codepen to demo this, which has the exact HTML and CSS that is in place on the site: http://codepen.io/idealbrandon/pen/EGlDa HTML SASS/SCSS Even through Codepen, this issue remains. Anyone have any clue here? Or should I just not worry about it since its only a dev release? My concern is that this might carry over to later releases, or, considering there is a flicker before the error occurs, I'm wondering if there is something simple I can use to fix this problem. Finally, here is screenshot of what is happening in both Canary (left) and Chrome Stable (right) side-by-side: http://cl.ly/YFLu This was a bug introduced while simplifying the Mac font back-end. This question is referenced in crbug.com/435822 , and the issue itself was fixed with crbug.com/421412 . I do not believe that this bug made it into a stable release (this time). The issue was that '-webkit-font-smoothing:antialiased' was being ignored. For those who don't know, this is a Mac specific property which is used not to turn on and off subpixel rendering (as one would expect from the name), but to control the fake-bolding which CoreGraphics applies to subpixel anti-aliased glyphs. At larger sizes this fake-bolding is quite noticeable, so it is desirable to disable it on any non-body text. For more details one can read a thread on the www-style list "Text anti-aliasing on the Mac", particularly this post. The discussion there came about due to the last time this broke and made it to stable in Chrome 22. Should this ever happen again (Mac only text seems too bold), one should open a Chromium bug and mention that '-webkit-font-smoothing:antialiased' seems to be on the fritz again. 这篇关于Google Chrome字体呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
<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>
// 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
}
