Web-kit e valores de sub-pixel, solução alternativa?

Question

Apr 13, 2011, 11:12 PM

Web-kit e valores de sub-pixel, solução alternativa?

Notei que navegadores de kit da Web como Chrome e Safari (Windows) tendem a arredondar os valores para o pixel mais próximo, enquanto o Firefox, IE,? Opera? pode usar valores de sub-pixel. Normalmente, esse não é um grande problema, mas quando os uso para alinhar precisamente o espaçamento entre letras ou usar sombras de texto para obter efeitos consistentes em diferentes resoluções de clientes, isso me causa dor de cabeça. Veja o seguinte caso de teste.

Você verá que, no FF, mesmo as letras mais pequenas ainda têm sombra, enquanto o Chrome arredonda o valor em para zero e os dois primeiros parágrafos não têm sombr

EDITA Não se trata das unidades. Se você substituir 0,03em por 0,9, 0,8, 0,7 .. px O FF exibirá sombras cada vez menores, enquanto que quando o Chrome estiver abaixo de 1px, de repente, nada será exibid

<!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>