Yo uso el de Google Webfonts servicio en mi sitio web y dependen de ella. Se hace bien en la mayoría de los navegadores, pero en Chrome en Windows se hace especialmente malo. Muy entrecortado y pixelado.

Lo que he encontrado hasta ahora es que el Chrome requiere .formato svg fuente se carga por primera vez. La fuente que estoy usando sin embargo, la llamada lo antes posible, sólo estaba disponible en .woff. Me he convertido a .svg utilizando un servicio en línea gratuito, pero cuando he añadido esto a mi hoja de estilos (antes de la .woff), no cambió nada.

También he intentado:

-webkit-font-smoothing: antialiased;
text-shadow: 0px 0px 0px;

Con la esperanza de que cualquiera podría ayudar a que el texto se hace más fluida.

Ahora me he quedado sin ideas y no me gustaría cambiar las fuentes. ¿Alguien tiene una idea de como puedo resolver este problema? He estado usando el Adobe Browserlab a la prueba de la representación, viendo que yo sólo es dueño de un mac. El enlace al sitio: www.symvoli.nl/about

Gracias de antemano!

Edición del 11 de abril de 2013:

Chrome 35 Beta parece que finalmente han resuelto este problema:

Google webfonts de procesamiento agitado en Chrome en Windows

InformationsquelleAutor Joey | 2012-06-08

12 Comentarios

  1. 66

    Actualización De Agosto De 2014

    Google finalmente corrige este problema en Chrome 37 de forma nativa!!!. Pero, por razones históricas, no voy a borrar esta respuesta.

    Problema

    El problema es creado porque chrome en realidad no se puede representar fuentes TrueType con un correcto anti-aliasing. Sin embargo, chrome todavía rinde archivos SVG bien. Si mueve la llamada para su archivo svg en su sintaxis por encima de la woff, chrome descargar el archivo svg y usarlo en lugar del archivo woff. Algunos trucos como el que usted propone trabajar bien, pero sólo en determinados tamaños de fuente.

    Pero este error es muy bien conocido por los desarrolladores de Chrome equipo, y ha sido en la fijación desde julio de 2012. Ver el oficial de informe de error hilo aquí: https://code.google.com/p/chromium/issues/detail?id=137692

    Actualización Oct 2013 (Gracias a @Catch22)

    Al parecer, algunos sitios web pueden experimentar intermitente espaciado problemas al renderizar el svg. Así que hay una mejor manera la piel. Si usted llama el svg con una consulta de medios específicos para Chrome, el espaciamiento de los problemas desaparecen:

    @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
          font-family: 'MyWebFont';
          src: url('webfont.svg#svgFontName') format('svg');
      }
    }

    Primera aproximación de la solución:

    La Fontspring a prueba de balas sintaxis modificado para servir el 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');
    }

    Lectura adicional:

    • Es una vergüenza que esto es aún de un tema (última actualización Abr 24, 2013) code.google.com/p/chromium/issues/detail?id=137692#c104
    • Yo en realidad no lo tiene que modificar el Fontsquirrel/Fontspring a prueba de balas sintaxis – yo sólo lo utiliza como es y se solucionó el problema de representación.
    • Donde conseguir SVG-archivos si sólo TTFs están disponibles?
    • entonces, ¿por qué si llama desde el cdn de google (que es más rápido y una mejor práctica ) ¿se envían el tipo real antes de la svg. Mal google
    • El Fontspring blog ha sido actualizado para sugerir el uso de un Cromo de los medios específicos de consulta a fin de evitar algunos de espaciado de problemas cuando se utiliza SVG – fontspring.com/blog/smoother-rendering-in-chrome-update
    • Gracias @Catch22, añadido a mi respuesta!
    • Esta respuesta debe ser removido tan Chrome ya no es compatible con Fuentes SVG!
    • He actualizado la respuesta, pero no hay ninguna razón para eliminar la respuesta, incluso ahora, cuando el problema está resuelto
    • lo siento, yo en realidad no significa eliminado!

  2. 18
    -webkit-text-stroke: 0.5px;

    sólo se utiliza en grandes cantidades de texto, ya que afectarán a su rendimiento de la página.

    • ¿Cómo se ve que no sean Windows Chrome?
  3. 4

    He intentado varias soluciones y, finalmente, llegó con uno que funciona con las versiones más recientes de Chrome, que no cae para cambiar el orden de los archivos:

    Esencialmente, he movido el archivo TTF en una Mozilla sección específica.

    @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');
    }
  4. 2

    Respuesta de Tom & fuente de la primavera no es para mí por alguna razón. Esta revisión Sam Goddard hizo :

    Después de experimentar en mí mismo, me topé con lo que parece ser un decente, muy fácil solución para este problema. Parece que Chrome utiliza el .archivo svg en el @font-face kit, y no le gusta ser llamado pasado. A continuación es el estándar de la convocatoria de @font-face con CSS:

    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 puede verse en el ejemplo, la .archivo svg, ocupa el último lugar en la lista de llamada Url. Si queremos modificar el código de destino de los navegadores webkit, a continuación, dígales que únicamente utilizan 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’);
        }
    }
    • Es preferible añadir el ejemplo relevante, o información, en lugar de simplemente proporcionar un enlace. Si el enlace a ir nunca muerto; está a la izquierda con una respuesta que no tiene sustancia.
    • Gracias por señalarlo. He corregido la respuesta.
  5. 1

    Que podría ser la fuente de su uso «asap», no se muestra del todo bien en algunos tamaños. He cambiado el tamaño de su h1 de 3.5em a 50px y se ve un poco mejor. No puede ser la solución perfecta, pero me he dado cuenta de que un montón de google webfonts puede ser impredecible

    • Pero lamentablemente, esto no explica por qué no representar perfectamente en OS X basado en los navegadores y, para mi propia sorpresa, Internet Explorer. Pero si hay algo que, definitivamente voy a mirar en esta solución para al menos tratar de suavizar un poco
    • Google Chrome utiliza el anti-aliasing, pero el texto parece más pixelada que en otros navegadores, ya que sólo admite horizontal anti-aliasing.
    • Hay algo de buena información acerca de este y una posible solución en este enlace vandersterren.com/blog/2012/04/…
  6. 0

    Desarrollo en Firefox. Mi experiencia es que FF muestra fuentes ttf muy bien sin ningún tipo de reglas adicionales (más allá de la @font-face llamando a la url para el archivo de la fuente). Chrome, sin embargo, es una historia diferente. Incluso con el -webkit-font-suavizado: suavizados; la regla es que todavía muestra de cualquier fuente bastante raggedly. Safari no parece tener ese problema, así que no es inherentemente Webkit que no puede representar una fuente limpia, es un Cromo problema.

    No he probado añadiendo el -webkit-text-stroke: 0.5 px; la regla, pero.

    De las respuestas anteriores me gusta mucho Tom Sarduy la respuesta mejor. Aparte de una buena descripción del problema, se da un gran @font-face de la pila a utilizar para cubrir todos los principales navegadores.

  7. 0

    Tenían la misma cosa chicos. Bien en todos los navegadores excepto chrome – incluso IE10 y 9 estaban bien. Dreamwaeevr CS6 también utiliza una versión similar de fontsprings código, pero tiene el svg en la final. Cambiar todo para SVG antes de woff y ttf y todo en el mundo es bueno. Tom es golpear con sho ejemplo, en los hechos del pasado que en su código y mapa de rutas de acceso a las fuentes que usted necesita, y estás en el negocio!

  8. 0

    Parece que Google podría servir de diferentes woff archivos dependiendo del navegador y sistema operativo.

    Me pareció que si yo descargue la fuente de la IE, se trata de 10k más grande que si se realiza en un Safari en el Mac para una fuente en particular. 43k vs 33. También, la versión de IE parece verse muy bien en el Mac, pero la versión para Mac no funciona bien en el PC. La versión para Mac se ve peor en Mozilla Firefox en el PC.

    Intente esto:
    http://fonts.googleapis.com/css?family=Source+Sin+Pro:400,600,400 cursiva,600italic

    SourceSansPro-Regular.woff de la versión de PC 27k

    SourceSansPro-Regular.woff versión para Apple 24k

  9. 0

    he tratado de muchas maneras:
    -carga el archivo svg con font-face
    -webkit-font-suavizante

    después de

    -webkit-transform: rotate(-4.7deg) translate3d( 0, 0, 0);

    la rotación era más suave, pero el problema principal no ha pasado.

    Para mí, la solución fue añadir:

    -webkit-text-stroke: 0.5px;

Dejar respuesta

Please enter your comment!
Please enter your name here