Cuando he diseñado mi sitio web en Adobe Flash Pro CS6, la fuente tiene un aspecto como este:

Cómo procesar delgado fuentes más suavemente en CSS 3 en Windows?

La fuente tiene un aspecto liso y un poco más grueso, y cuando creo HTML y CSS para representar el tipo de letra en un explorador, aparece como estos, respectivamente, en IE, Firefox y Chrome.

Cómo procesar delgado fuentes más suavemente en CSS 3 en Windows?

Parece más delgado y pixelada en algunas áreas. He visto mucho más suave de representación de fuentes en OS X. ¿Cómo puedo hacer que la apariencia de la fuente más suave en estos navegadores? Estoy asumiendo que este es un problema con ClearType, que se ve horrible con delgado fuentes como esta.

Este es el código que estoy usando para probar, de modo que las respuestas pueden ser probados antes de ser publicado:

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
    </body>
</html>
  • ClearType es sólo de Microsoft en nombre de la subpixel la representación que hace de su fuente aparecen «de color» en Firefox y Chrome, a menos que solucionarlo a través de CSS (por CIERTO, siempre he odiado subpixel la representación, que es una de esas ideas que son buenas sólo en teoría, no en la práctica)
  • A mi atención la diferencia entre la representación en CS6 y en los navegadores se ve como derivados de un diferente gamma (ɣ) o de una transparencia que se aplica (en los navegadores) adicionalmente a los suavizado (es decir, los píxeles grises también son parcialmente transparentes)
  • Última información: Firefox y Chrome en mi Ubuntu 12.04 representando la fuente en algún lugar entre sus extremos, tal vez un poco más cerca de CS6 (que hace una particular suave de representación) que a su navegador y sin colorear (pero tal vez eso es porque tengo desactivado a nivel mundial en algún lugar).
  • Has probado a mirar en la página de prueba en otros equipos? No estoy seguro, pero el renderizado de las fuentes podría depender de gráficos de hardware y firmware, y configuraciones.
  • Voy a probar eso. Después de todo, mi portátil no objeto de hacer las cosas correctamente en IE, a menos que me desactivar la representación de hardware… yo ni siquiera pensar en eso hasta ahora.
  • Tengo que corregir un comentario anterior: «gris de los píxeles parcialmente transparentes» debe ser «parte píxeles transparentes son también de color gris (parte blanca)». Pero eso es sólo el efecto visual. La razón es probablemente en el algoritmo de procesamiento, el cual intenta transmitir una impresión de nitidez en la costa de la precisión. CS6 parece tener un enfoque completamente diferente: parece que el fuerte vector de la imagen es borrosa con la correcta de la convolución de la función (que la teoría dice que es una función de sinc), y el muestreo se realiza teniendo en cuenta la corrección gamma. El resultado es borrosa pero por lo demás perfecto

9 Comentarios

  1. 69

    Nunca se va a obtener de los sitios de la misma apariencia en diferentes navegadores o sistemas operativos, que están utilizando diferentes tecnologías, etc, etc.

    Esto es algo que no se preocupan realmente de la. La gente que usa IE no va a cambiar a Firefox o Chrome, o viceversa. Ellos están acostumbrados a la forma en fuentes aspecto y no se va a notar.

    Navegadores inconsistencias es una cosa front end desarrolladores tienen que vivir con (por desgracia). Su gran si todos ellos tienen el mismo aspecto pero que no va a suceder

    Cosas que puede intenta, usted probablemente necesita soluciones diferentes para diferentes navegadores.:

    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;

    Edit 1: DirectWrite está ahora en chrome para windows que se mejorar la representación.

    Edición 2 (2017): interfaz de usuario del Sistema de fuentes

    Otra cosa que puedes intentar es utilizar el sistema de fuentes para mejorar la experiencia de usuario.

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

    Readup – smashingmagazine

    Readup – booking.com

    Readup – medio

    • Ninguna de las soluciones trabajado, pero esta fue la mejor respuesta. Maldito…
    • La gente no nota los detalles, pero eso no quiere decir que no están afectadas por ellas en términos de fatiga ocular o simplemente el sentido vago de una página de aspecto menos bien diseñado o profesional sin ser capaz de identificar exactamente cómo. Si no hay un gran número de cuotas a pagar en el rendimiento o el mantenimiento o las mejores prácticas, invertir un poco de tiempo en detalles que no todo el mundo va a notar conscientemente es todavía vale la pena la OMI.
    • No funciona, :_-(
    • Sí, @ErikReppen, yo realmente no se preocupan por el tono inicial de este bien. Trate de tener un cliente que se nota la diferencia, se convierte en importante. Especialmente ya que esto no es una simple cuestión de «no se parece a la misma en ambos», es «una fuente se ve como una mierda.» Con respecto a la solución, aunque, no son de texto-representación y -webkit-font-suavizado NO disponible en cualquier versión de IE?caniuse.com/#search=-webkit-font-smoothing
    • Del «sistema de fuentes», mencionó anteriormente, sólo alrededor de la mitad son por lo general-las fuentes del sistema instalado, el resto son fuentes web que probablemente son no instalado a menos que usted salió de su camino para hacerlo.
    • Se utilizan realmente. Firefox utiliza Fira Sans

  2. 6

    texto-representación: optimizeLegibility el ajuste se aplica a la fuente, que puede mejorar la legibilidad, pero sólo si la resolución de la pantalla y el tamaño de fuente es lo suficientemente alto. No hacer que la fuente de cualquier audaz, si era demasiado delgada antes.

    Aquí el problema podría ser la fuente de las familias que han uno o más caras, que son más ligero de lo normal (font-weight:400) – como Googles Lato.

    Si se carga toda la luz para regular las caras de Lato como este

    @import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

    Me hizo la observación de que la mayoría de las Ventanas de los navegadores Chrome y OSX uso font-weight:100 si se especifica nada más claro que 400 – (normal o regular). Cambiar el font-weight: a 200 o 300 no hacer ningún diferentes, aunque el inspector de herramientas insisten en que la máquina está mostrando por ejemplo, font-weight:200. El que no lo es.

    La eliminación de los pesos más ligeros (100 en mi caso) se soluciona el problema, y me permite utilizar al menos font-weight:200, respectivamente. La representación no es absolutamente idéntico en todos los navegadores, pero similar al menos.

    @import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

    Por supuesto, esto no resuelve el problema real no poder acceder a la luz de la fuente de pesos según lo especificado.

  3. 5

    Que no hay una única solución para esto, según lo que yo sé. Es varias revisiones aplicado a las necesidades de cada navegador, excepto IE. Dar a estos un tiro:

    Para Chrome, y cualquier otro navegador usando webkit:

    -webkit-font-smoothing:antialiased !important;

    El lugar que en su html, CSS, o por lo que los elementos que usted ve ajuste. Usted puede también agregar este junto con el de arriba:

    text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);

    Experimentar con diferentes valores de alfa, pero debe mantener la sombra tamaños como son.

    Yo estoy al tanto de cualquier cosa que usted puede hacer, pero esto debe abordar el mayor problema con Chrome, al menos, (además de otros navegadores webkit).

    • Ninguno de estos parecía a hacer algo de manera diferente, incluso en Chrome. Incluso si lo hizo el trabajo, mi web no puede ser exclusiva de Chrome.
    • Comprensible. El punto fue para arreglar el problema peor, por lo que el problema global no sería tan malo. En cuanto a lo de hacer ninguna diferencia, han asegúrese de hacer un ctrl+F5 para borrar la memoria caché? Eso va para los de Ryan contestar. A veces, usted no verá un cambio en el CSS hasta que no lo hagas.
    • Voy a probar esto y ver si funciona.
    • No, tiene el mismo aspecto que antes.
    • Hmm. Me temo que no tengo nada más. Haciendo un poco de búsqueda en torno a este sitio confirma que no hay mucho más que usted puede probar: stackoverflow.com/questions/17864742/…
    • Como muchas relacionadas con la fuente de ajustes, hereda de la etiqueta body. Sólo se pueden colocar en no si desea que todas las fuentes anti-alias. Ni idea de lo que la representación impacto en el rendimiento de hacer que pudo ser ayer, la web móvil de vista de tipo de situaciones, pero para un node-webkit aplicación de la intención de un quiosco-tipo de escenario, funciona muy bien.

  4. 5

    Me parece que en Google Chrome se puede agregar -webkit-text-stoke para mejorar la apariencia de las fuentes.

    por ejemplo:

    -webkit-text-stroke: .025em rgba(51,51,51,0.50);

    • Lo siento. Necesito una respuesta universal… por lo menos IE, Firefox, Chrome y Safari.
    • Básicamente, esta es una falsa negrita efecto.
    • Para el mejor resultado en chrome, el uso de trazo sólido y usar el mismo color para la fuente. Por ejemplo, si su texto es de color negro uso: -webkit-text-stroke: .025em rgba(0,0,0,1);
    • Esta es realmente la mejor solución si usted está buscando una solución para el Cromo. Esto realmente mejora el aspecto de las fuentes en el Átomo, -webkit-text-stroke: 0.025em; es bueno.
  5. 2

    Creo que esto es más un problema de Windows de un problema con el navegador. El mismo navegadores hacer que el mismo fuentes mucho más fluida en otros sistemas operativos como Linux o Mac.

    En Chrome, y por extensión cualquier navegador webkit, puede utilizar el código siguiente para suavizar sus fuentes:

    -webkit-font-smoothing: antialiased;

    o

    -webkit-font-smoothing: antialiased !important;

    Normalmente, me parece que de esto no hace mucho. Creo que tendremos que esperar a Microsoft para hacer algo al respecto.

    • «puede utilizar el código siguiente para agregar el anti-aliasing para tus fuentes» no es correcto: antialiased sólo quita el subpixel parte de la predeterminada, que es subpixel-antialiased cuando no ya antialiased. El subpixel parte es la responsable del color de los bordes.
  6. 2

    Yo uso esta en todos los sitios y cubre la mayoría de los problemas con la representación de la fuente.

    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important; 
  7. 2

    Me encontré con un problema similar hace poco, el mismo tipo de letra tamaño y la familia se veía de forma diferente en Chrome, safari y Firefox. El chrome y firefox se ve especialmente grueso. Esto podría no ser la mejor manera, pero funcionó para mí

    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;

    También, vale la pena un tiempo para checar los diferentes motores de render.
    CSS Lo son -moz – y -webkit-?

  8. 1

    Usted puede ser capaz de solucionar esto usando la propiedad css text-representación.

    Ejemplo:

    text-rendering: auto
    text-rendering: optimizeSpeed
    text-rendering: optimizeLegibility
    text-rendering: geometricPrecision
    text-rendering: inherit

    Usted probablemente desee utilizar texto-representación:optimizeLegibilty.

    Más información aquí: MDN Texto-Representación

    • He intentado text-rendering:optimizeLegibilty, y me dio el mismo resultado que antes en IE, Firefox y Chrome.
    • Desafortunadamente, los navegadores parecen no implementar este correctamente a pesar de que sería un es práctico de la propiedad y la documentación en MDN dice que iba a funcionar.
  9. 0

    Im que va a usar con un hack y no me gusta, pero funciona

    transform: rotate(-0.0002deg)

    Hace que las fuentes notablemente suave, aunque un poco más delgado

Dejar respuesta

Please enter your comment!
Please enter your name here