Valores del kit web y subpíxel, ¿solución temporal?

Me di cuenta de que los navegadores de juegos web como Chrome y Safari (Windows) tienden a redondear los valores de em al pixel más cercano, mientras que Firefox, IE,? Opera? puede usar valores subpíxel. Esto normalmente no es un gran problema, pero cuando los utilizo para alinear con precisión el espaciado entre letras o uso sombras de texto para lograr un efecto consistente en diferentes resoluciones de clientes, esto me causa dolor de cabeza. Eche un vistazo en el siguiente caso de prueba.Valores del kit web y subpíxel, ¿solución temporal?

Verá que en FF incluso las letras más pequeñas aún tienen una sombra, mientras que Chrome redondea el valor em a cero y los primeros dos párrafos no tienen ninguna sombra.

EDIT No se trata de unidades. Si reemplaza 0.03em con 0.9, 0.8, 0.7 .. px FF se mostrará una sombra cada vez más pequeña, mientras que cuando Chrome desciende por debajo de 1px de repente no muestra nada.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html lang="bg" xml:lang="bg" xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style type="text/css">body {font-size: 18px;} p {color: cyan; text-shadow: -0.03em -0.03em 0 rgb(0, 0, 0);}</style> 
</head> 
<body> 

<p style="font-size:1em">No Shadow Test</p> 
<p style="font-size:1.5em">No Shadow Test</p> 
<p style="font-size:2em">Test</p> 
<p style="font-size:2.5em">Test</p> 
<p style="font-size:3em">Test</p> 
<p style="font-size:3.5em">Test</p> 
<p style="font-size:4em">Test</p> 
<p style="font-size:4.5em">Test</p> 
<p style="font-size:5em">Test</p> 

</body> 

</html>

Fuente

2011-04-13 Boris Hamanov

No confío en los diseños de píxel perfecto. La única forma en que puedes lograrlos es usar una imagen ... – Blender

Mi diseño es todo, pero perfecto en píxeles. No uso píxeles en ningún lado. –

'em' se basa en la altura de la' m' con el tamaño de fuente actual. Como está basado en píxeles, también lo es el 'em'. – Blender

No recomendaría em. Usaría px (píxeles). He aquí un EM al convertidor PX: http://convert-to.com/446/pixels-px-to-em-conversion.html

PX es la misma en todos los navegadores (por lo que yo sé)

Fuente

2011-04-13 21:16:05 alexy13

Los píxeles son relativos a la resolución de la pantalla, mientras que los ems son relativos al tamaño de la fuente (el tamaño de la fuente también es relativo a la fuente/familia de la fuente). También tenga en cuenta que los "convertidores" de em a px suponen una tonelada sobre una fuente, generalmente suponiendo que 16px = 1em, lo que no siempre es el caso. –

¿Sabes cómo se ve el texto de 10px en 800X600 y cómo se ve en 1920X1080? MUY DIFERENTE. Los días de buenos diseños de píxeles fijos están en el pasado. –

No estoy de acuerdo. Paul Irish, un elemento básico en la comunidad de desarrollo, utiliza px en lugar de em para tamaños de fuente _ ** [como se muestra aquí] (http://na.isobar.com/standards/#_pixels_vs_ems) ** _. –

La primera cosa que sugeriría es que utilice ex units para las coordenadas Y y los valores de altura Como fuentes puede tener un x-heights por separado. Este puede curva de ayuda errores de redondeo a su favor, pero probablemente no. El peor caso es que al menos es exacto a la fuente en sí.

En segundo lugar, desafortunadamente no encuentro ninguna referencia en la especificación que diga qué debería ser un navegador en este caso, ¿por qué estamos viendo las diferencias? Si me equivoco, ¿siempre podría presentar un error con el equipo de webkit?

En cuanto a una solución, solo puedo sugerirle que determine la mejor ruta en este caso. Piense que es similar a IE no es compatible con text-shadow. Si el redondeo falla, no aparecerá. Luego, tome decisiones sobre su diseño en función de esta postura.

Lo que personalmente hago es usar píxeles para cosas que sé que es probable que tengan errores de redondeo, como sombras y bordes.

Fuente

2011-04-13 21:32:49

¡Gracias! Bonito escribir, pero no sé si las unidades son el problema. Por favor, mira mi edición. –

@ avok00: el único consejo que puedo dar ya está en mi respuesta.Usted sabe que el webkit se redondea a 0 en algunos casos, por lo que el uso de píxeles en los casos en que podría ocurrir el redondeo es probablemente la mejor opción. –

En realidad, en resoluciones muy bajas (teléfonos) Necesitaré valores de 0.4px por ejemplo, algo que muestra FF/IE (más pequeño que la configuración de 1px, no sé cómo) y Web-kit no. –

El problema es que Chrome no colocará sombras de texto y de texto en incrementos de subpíxeles, por lo que redondea al píxel más cercano.

Puede ver el mismo efecto con letter-spacing donde firefox permitirá valores no enteros en píxeles, mientras que cromo redondeará el píxel más cercano.

Fuente

2012-10-02 17:45:16 Kostia

Valores del kit web y subpíxel, ¿solución temporal?

Respuesta

Cuestiones relacionadas