css - teclado - Las páginas web de Google se muestran entrecortadas en Chrome en Windows
inspeccionar pagina web (12)
Actualización agosto de 2014
Google finalmente soluciona este problema en Chrome 37 de forma nativa. Pero por razones históricas, no borraré esta respuesta.
Problema
El problema se crea porque Chrome realmente no puede procesar fuentes TrueType con anti-aliasing correcto . Sin embargo, Chrome todavía procesa bien los archivos SVG. Si mueve la llamada para su archivo svg en su sintaxis por encima del woff, Chrome descargará el svg y lo usará en lugar del archivo woff. Algunos trucos como tú proponen que funcionen bien, pero solo en ciertos tamaños de fuente.
Pero este error es muy conocido por el equipo de desarrolladores de Chrome y se ha estado corrigiendo desde julio de 2012. Consulte el hilo del informe de errores oficial aquí: https://code.google.com/p/chromium/issues/detail?id=137692
Actualización de octubre de 2013 (Gracias a @ Catch22)
Aparentemente, algunos sitios web pueden experimentar problemas de espaciado intermitente al procesar el svg . Entonces hay una mejor manera de desollarlo. Si llama a svg con una consulta multimedia específica para Chrome, los problemas de espacio desaparecerán:
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ''MyWebFont'';
src: url(''webfont.svg#svgFontName'') format(''svg'');
}
}
Primera solución de aproximación:
La sintaxis a prueba de balas de Fontspring modificada para servir a la svg primero:
@font-face {
font-family: ''MyWebFont'';
src: url(''webfont.eot'');
src: url(''webfont.eot?#iefix'') format(''embedded-opentype''),
url(''webfont.svg#svgFontName'') format(''svg''),
url(''webfont.woff'') format(''woff''),
url(''webfont.ttf'') format(''truetype'');
}
Otras lecturas:
Uso el servicio Google Webfonts en mi sitio web y dependo mucho de él. Se ve bien en la mayoría de los navegadores, pero en Chrome en Windows se vuelve especialmente malo. Muy entrecortado y pixelado.
Lo que descubrí hasta ahora es que Chrome requiere que primero se cargue la fuente de formato .svg. Sin embargo, la fuente que estoy usando, llamada Asap, solo estaba disponible en .woff. Lo convertí en .svg usando un servicio gratuito en línea, pero cuando lo agregué a mi hoja de estilo (antes del .woff), no cambió nada.
También lo intenté:
-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;
Esperando que cualquiera de los dos ayude a que el texto se reproduzca de forma más fluida.
En este momento me he quedado sin ideas y odiaría cambiar las fuentes. ¿Alguien tiene una idea de cómo puedo resolver este problema? He estado usando Adobe Browserlab para probar el renderizado, ya que solo tengo un Mac. El enlace al sitio es: www.symvoli.nl/about
¡Gracias por adelantado!
Editar 11 de abril de 2013:
Chrome 35 Beta parece haber resuelto finalmente este problema:
Answer by Tom & font-spring no lo hizo por mí por alguna razón. Sin embargo, esta corrección de http://www.adtrak.co.uk/blog/font-face-chrome-rendering/ sí lo hizo:
Después de experimentarme, me encontré con lo que parece ser una solución decente, muy fácil para este problema. Parece que Chrome utiliza el archivo .svg en el kit @ font-face y no le gusta que lo llamen al último. Debajo está la llamada estándar para @ font-face usando CSS:
// font-face inclusion
@font-face {
font-family: ''font-name'';
src: url(''path-to-font/font-name.eot'');
src: url(''path-to-font/font-name.eot?#iefix'') format(''eot''),
url(''path-to-font/font-name.woff'') format(''woff''),
url(''path-to-font/font-name.ttf'') format(''truetype''),
url(''path-to-font/font-name.svg'') format(''svg'');
font-weight: normal;
font-style: normal;
}
Como se puede ver en el ejemplo, el archivo .svg viene último en la lista de URL llamadas. Si modificamos el código para orientarnos a navegadores webkit, entonces dígales que utilicen únicamente el archivo .svg.
// Usage
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ‘font-name'';
src: url(‘path-to-font/font-name.svg’) format(‘svg’);
}
}
Desarrollo en Firefox. Mi experiencia es que FF muestra las fuentes ttf muy bien sin reglas adicionales (más allá de @ font-face llamando a la url para el archivo de fuentes). Chrome, sin embargo, es una historia diferente. Incluso con -webkit-font-smoothing: antialiased; regla todavía muestra cualquier fuente bastante desiguales. Safari no parece tener ese problema, por lo que no es inherentemente Webkit el que no puede procesar una fuente limpiamente, es un problema de Chrome.
No intenté agregar el -webkit-text-stroke: 0.5px; gobernar, pero lo hará.
De las respuestas anteriores me gusta mucho la respuesta de Tom Sarduy. Además de una buena descripción del problema, ofrece una excelente pila de fuentes @ para usar para cubrir todos los principales navegadores.
Intenté una serie de soluciones y finalmente encontré una que funciona con las versiones más nuevas de Chrome que no cambian el orden de los archivos:
Básicamente, moví el archivo TTF a una sección específica de Mozilla.
@font-face {
font-family: ''MyWebFont'';
src: url(''webfont.eot'');
src: url(''webfont.eot?#iefix'') format(''embedded-opentype''),
url(''webfont.svg#svgFontName'') format(''svg''),
url(''webfont.woff'') format(''woff'');
}
@-moz-font-face {
font-family: ''MyWebFont'';
src: url(''webfont.ttf'') format(''truetype'');
}
Lo he intentado de muchas maneras: cargando svg con font-face -webkit-font-smoothening ...
después
-webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);
la rotación fue más suave, pero el problema principal no se ha ido.
Para mí, la solución fue agregar:
-webkit-text-stroke: 0.5px;
Otra referencia de enlace para la representación de fuentes web en Chrome -
http://www.fontspring.com/blog/smoother-web-font-rendering-chrome
Parece que Google podría servir diferentes archivos woff según el navegador y el sistema operativo.
Descubrí que si descargo la fuente de IE, es 10k más grande que si se hace en Safari desde la Mac para una fuente en particular. 43k vs 33k. Además, la versión de IE parece estar bien en la Mac, pero la versión de Mac no parece funcionar bien en la PC. La versión Mac se ve peor en Mozilla Firefox en la PC.
Pruebe esto: http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic
SourceSansPro-Regular.woff PC versión 27k
SourceSansPro-Regular.woff Apple versión 24k
Se ha sugerido una solución llamando al archivo .svg primero, http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
Simplemente podría ser la fuente que el uso de "asap" no sea tan bueno en ciertos tamaños. Cambié el tamaño de tu h1 de 3.5em a 50px y se ve un poco mejor. Puede que no sea la solución perfecta, pero he notado que muchas webfonts de google pueden ser impredecibles
Tenía lo mismo chicos. Bueno en todos los navegadores excepto en Chrome, incluso IE10 y 9 estaban bien. Dreamwaeevr CS6 también usa una versión similar del código fontsprings, pero tiene el svg al final. Cambie la ronda para SVG antes de woff y ttf y todo en el mundo es bueno. ¡Tom está aquí con el ejemplo de hos, de hecho más allá de eso en tu código y rutas de mapas a las fuentes que necesitas, y estás en el negocio!
https://www.gettingthingstech.com/how-to-fix-jagged-font-rendering-in-google-chrome/
Esta publicación explica un poco sobre las funciones experimentales de Google Chrome. Al parecer, habilitar la opción "DisableWrite" corrige las fuentes dentadas. Esto es obviamente una solución PER por máquina y no a escala completa.
-webkit-text-stroke: 0.5px;
Úselo solo en texto grande, ya que afectará el rendimiento de su página.