Renderización de fonts de Google Chrome

Me encuentro con un problema con la representación de fuente básica en Google Chrome Canary. Estoy incrustando el tipo de letra “Proxima Nova” en un sitio que estoy desarrollando a través de Typekit. Actualmente, esto solo se aloja localmente, por lo que tendré que hacer todo lo posible para mostrar el problema a través de capturas de pantalla y ejemplos de código.

Para resumir, cada vez que uso cualquier fuente web en Google Chrome Canary (actualmente 40.0.2202.3), mis fonts se están volviendo demasiado pesadas. En pocas palabras, durante menos de un segundo después de la carga de la página, la fuente se representa con el grosor correcto y luego se engrosa en un segundo de la carga del navegador. Intenté deshabilitar todos los complementos y el problema aún existe. Cuando deshabilito CSS en la página, se muestra de forma consistente con otros navegadores (como uno esperaría). Las fonts se procesan correctamente en Chrome 38 y 39, así como en todos los demás navegadores principales. He probado tanto en Windows como en Mac OS con los mismos resultados. Creé un códec para hacer una demostración de esto, que tiene el HTML y el CSS exactos en el sitio: http://codepen.io/idealbrandon/pen/EGlDa

HTML

This is the main section

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 } 

Incluso a través de Codepen, este problema permanece. Alguien tiene alguna pista aquí? ¿O simplemente no debería preocuparme porque es solo un lanzamiento dev? Mi preocupación es que esto podría trasladarse a lanzamientos posteriores, o, considerando que hay un parpadeo antes de que ocurra el error, me pregunto si hay algo simple que pueda usar para solucionar este problema.

Finalmente, aquí hay una captura de pantalla de lo que está sucediendo en ambos lados de Canary (izquierda) y Chrome estable (derecha): http://cl.ly/YFLu

Este fue un error introducido al simplificar el back-end de la fuente Mac. Esta pregunta se hace referencia en crbug.com/435822, y el problema en sí mismo se corrigió con crbug.com/421412 . No creo que este error lo haya convertido en una versión estable (esta vez).

El problema era que ‘-webkit-font-smoothing: antialiased’ estaba siendo ignorado. Para los que no lo sepan, esta es una propiedad específica de Mac que no se usa para activar y desactivar la representación de subpíxeles (como cabría esperar del nombre), sino para controlar la falsa negrita que CoreGraphics aplica a las imágenes subpixel no alias glifos. En tamaños más grandes, esta falsificación es bastante notable, por lo que es deseable desactivarla en cualquier texto que no sea del cuerpo. Para obtener más información, puede leer un tema en la lista de estilo de www “Anti-aliasing de texto en la Mac”, especialmente esta publicación . La discusión surgió debido a la última vez que esto se rompió y llegó a estable en Chrome 22.

Si esto ocurriera nuevamente (el texto de Mac solo parece demasiado audaz), uno debería abrir un error de Chromium y mencionar que ‘-webkit-font-smoothing: antialiased’ parece estar de nuevo en fritz.

Chrome (casi) siempre tiene problemas de fuente en Beta. Ingrese chrome://flags en la barra de direcciones y habilite disable directwrite , reinicie el navegador, todo debería verse bien ahora.

Por cierto, en mi experiencia, estos problemas de fuente siempre se corrigen en la próxima versión estable, lo más probable es que FB también se vea … Más audaz. enter image description here