A text-renderingpropriedade em CSS permite que você escolha a qualidade do texto ao invés da velocidade (ou vice-versa), permitindo que você ajuste a otimização sugerindo ao navegador como ele deve renderizar o texto na tela. Dito de outra forma no MDN:
A
text-renderingpropriedade CSS fornece informações ao mecanismo de renderização sobre o que otimizar ao renderizar o texto. O navegador faz compensações entre velocidade, legibilidade e precisão geométrica.
Você pode ver alguns exemplos antes / depois aqui. Às vezes, o resultado é apenas um kerning melhor:
Alguns arquivos de fontes contêm informações adicionais sobre como a fonte deve ser processada. optimizeLegibilityfaz uso dessas informações, e optimizeSpeednão faz.
Exemplo
p.legibility ( text-rendering: optimizeLegibility; ) p.speed ( text-rendering: optimizeSpeed; )Desempenho
Quando se diz que existe uma troca entre velocidade e precisão, eles não estão brincando. Pode haver problemas de desempenho significativos a serem considerados. Vale a pena citar inteiramente esse artigo:
Existem problemas de desempenho realmente significativos e efetivamente fatais (como atrasos de carregamento de 30 segundos ou mais) em dispositivos móveis ao usar o OptimizeLegibility para páginas longas. Aplique-o somente se você souber qual será o comprimento máximo do texto. (Além disso, evite usá-lo para clientes Android, pelo menos nas versões mais antigas que todos ainda usam: seu renderizador de fonte geralmente tem bugs muito estranhos quando este modo está ativado.)
Fiz alguns testes com o Instapaper para determinar os limites aproximados de desempenho do OptimizeLegibility. Um artigo de 5.000 palavras no Instapaper para iOS, por exemplo, só usará optimizeLegibility em dispositivos com CPU de classe A5 ou superior. Para evitar problemas em dispositivos iOS mais antigos, eu não recomendaria o uso de OptimizeLegibility cega e incondicionalmente em páginas com mais de 1.000 palavras. E eu não recomendaria ativá-lo no Android.
É tentador fazer:
/* Probably not advisable */ body ( text-rendering: optimizeLegibility; )Mas tenha muito cuidado com isso, parece perigoso, especialmente quando aplicado a uma página arbitrária.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 4+ | 5+ | 3+ | Talvez pós-Blink? | não | 2,3+? | 3+? |
Existem vários bugs. Problema do Android com novas linhas. O Chrome tem vários, incluindo espaçamento entre letras. Safari (e outros) padronizam para otimizarSpeed em vez de determinar na hora.