nitido - font css antialiasing

Forzar anti-aliasing usando css: ¿Es esto un mito?

Question

Recientemente, un cliente se ha quejado de la aparición de una fuente del sistema en IE6. Básicamente, el problema es que IE6 no es compatible con el suavizado de fuentes / anti-aliasing (sé que puede activarlo en una configuración de sistema operativo o algo así). Pero alguien arrojó esta joya:

"Puedes forzar anti-alias de fuentes en CSS usando pt en lugar de px".

Hice un POC rápido en varios navegadores y no vi ninguna diferencia. Encontré una referencia en línea, última publicación en este foro:

http://www.webmasterworld.com/css/3280638.htm

Esto suena como el equivalente de un mito urbano desarrollador web, mi sensación es que es BS. ¿Alguien lo ha visto alguna vez?

Answer 1

Oh sí puedes:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;

Fuente para Firefox , gracias a Justin por el aviso.

Answer 2

Agregar la siguiente línea de CSS funciona para Chrome, pero no para Internet Explorer o Firefox.

text-shadow: #fff 0px 1px 1px;

Answer 3

Aquí hay una buena manera de lograr anti-aliasing:

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

Answer 4

Como nota al margen, Gecko y WebKit apoyan el

text-rendering

propiedad también.

Answer 5

Creo que lo entendiste un poco mal. Alguien en el hilo que pegó dice que puede detener el anti-aliasing usando px lugar de pt , no que puede forzarlo usando este último. Aunque soy un poco escéptico con las dos afirmaciones ...

Answer 6

Dudo que exista alguna forma de obligar a un navegador a hacer cualquier cosa. Depende de la configuración del sistema, la fuente utilizada, la configuración del navegador, etc. Suena como BS para mí también.

Como nota, siempre use tamaños relativos, no PX.

Answer 7

Encontré una solución ...

.text {
            font-size: 15px;  /* for firefox */
            *font-size: 90%; /* % restart the antialiasing for ie, note the * hack */
            font-weight: bold; /* needed, don''t know why! */
        }  

Answer 8

Encontré una solución realmente incómoda usando el zoom y el filtro de propiedades de solo-ms Ejemplo (prueba con no aa, estándar y tipo de letra): http://nadycoon.hu/special/archive/internet-explorer-force-antialias.html

Cómo funciona:

-zona texto con zoom: x, x> 1

-Aplicar algunas imágenes borrosas (o cualquier otro filtro)

-zoom abajo con zoom: 1 / x

¡Es un poco lento, y muy! método de memoria hambrienta, y en fondos no blancos tiene un ligero halo oscuro.

CSS:

.insane-aa-4b                  { zoom:0.25; }
.insane-aa-4b .insane-aa-inner { zoom:4; }
.insane-aa-4b .insane-aa-blur  { zoom:1;
  filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
}

HTML:

<div class="insane-aa-4b">
<div class="insane-aa-blur">
<div class="insane-aa-inner">
  <div style="font-size:12px;">Lorem Ipsum</div>
</div></div></div>

Puede usar este jQuery corto para forzar el anti-aliasing, simplemente agregue la clase ieaa a cualquier cosa:

$(function(){ $(''.ieaa'').wrap(
''<div style="zoom:0.25;"><div style="zoom:1;filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);"><div style="zoom:4;"><''+''/div><''+''/div><''+''/div>''
); });

Answer 9

Estas fascinantes propiedades nuevas en CSS3 son:

font-smooth:always;
-webkit-font-smoothing: antialiased;

Sin embargo, aún no hice muchas pruebas con ellos, y definitivamente no serán buenos para IE. Podría ser útil para Chrome en Windows o quizás Firefox. La última vez que revisé, no antialias pequeñas cosas automáticamente como lo hacen en OSX.

ACTUALIZAR

Estos no son compatibles con IE o Firefox. La propiedad smooth de fuente solo está disponible en iOS safari por lo que recuerdo

Answer 10

La corrección de px a pt me funcionó en un sitio que usa una fuente de Google Web Fonts. En Win7 - IE8 corrigió correctamente la falta de renderización anti-alias.

Answer 11

No es un método puro de CSS, sino que es compatible de forma nativa sin cortes de reemplazo de fuentes: simplemente convierta su fuente a SVG y colóquela más arriba (antes de WOFF o TTF) en orden de @ font-face. Voila! Las fuentes son suaves ahora, porque ya no se tratan como una fuente, sino como una forma de SVG que se suavizará muy bien.

Nota: Noté que SVG puede pesar más que WOFF o TTF.

Answer 12

No estoy de acuerdo con Chad Birch. Podemos forzar el anti-aliasing, al menos en Chrome usando un simple truco CSS con la -webkit-text-stroke :

-webkit-text-stroke: 1px transparent;

Answer 13

No, realmente no hay ninguna forma de controlar esto como desarrollador web.

Las pequeñas excepciones son que puede hacer un falso forzado de anti-aliasing mediante el uso de Flash a través de sIFR , y algunos navegadores no anti-alias de mapas de bits / fuentes de píxeles (como no deberían, más información: Anti-Aliasing / Anti-Anti-Aliasing ).

Además, como mencionó Daniel, es ideal usar unidades em para todas las fuentes, vea The Incredible Em & Elastic Layouts with CSS para obtener más información al respecto.

Answer 14

Parece que la solución más exhaustiva se puede encontrar en http://www.elfboy.com/blog/text-shadow_anti-aliasing/ . Funciona en Firefox y Chrome, aunque Firefox no es tan efectivo como Chrome.

Answer 15

Usar una configuración de opacidad del 99% (a través de los filtros DXTransform) en realidad fuerza a Internet Explorer a desactivar ClearType, al menos en la Versión 7. Source

Answer 16

Yo digo que es un mito.

La única diferencia que he encontrado entre las fuentes basadas en pt, px y porcentaje es en términos de lo que IE escalará cuando el menú> Ver> Tamaño de texto>? Configuración? está cambiado.

IIRC:

• las fuentes basadas en px y pt NO escalarán
• percent basado en escala de fuentes en IE bien

HASTA DONDE SE:

• El suavizado de fuente se controla principalmente mediante la configuración de Windows para "ClearType" o, en el caso de IE7 / IE8, la configuración específica de IE para ClearType .