Sumário
A propriedade CSS text-rendering
prove informações para o mecanismo de renderização sobre o que otimizar no momento em que ele renderiza texto. O navegador faz escolhas entre velocidade, legibilidade e precisão geométrica. A propriedade text-rendering é uma propriedade SVG que não é definida em nenhum padrão CSS. Porém, navegadores Gecko e WebKit permitem o uso da propriedade em conteúdos HTML e XML nas plataformas Windows, Mac OS X e Linux.
Um efeito bastante visível é: optimizeLegibility
que habilita ligaduras (ff, fi, fl etc.) para algumas fontes com o texto menores que 20px como, por exemplo, fontes da Microsoft (Calibri, Candara, Constantia e Corbel ou a família de fontes DejaVu).
Initial value | auto |
---|---|
Aplica-se a | text elements |
Inherited | yes |
Midia | visual |
Computed value | as specified |
Animatable | não |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
text-rendering: auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit
Valores
auto
- O navegador faz sugestões de quando otimizar velocidade, legibilidade e precisão geométrica enquando formata o texto. Para diferenças em como esse valor é interpretado pelo navegador, veja a tabela de compatibilidades.
optimizeSpeed
- A navegador prioriza a velocidade de renderização sobre a legibilidade e precisão geométrica no momento de rederização do texto. Essa opção desabilita o kerning1 e ligatures2.
optimizeLegibility
- O navegador prioriza legibilidade sobre a velocidade de renderização e precisão geométrica. Essa propriedade habilita o kerning e ligatures opcionais.
geometricPrecision
-
O browser prioriza a precisão geométrica sobre a velocidade de renderização e legibilidade. Alguns aspectos de fontes - tais como kerning - não se escala linearmente e, dessa forma,
geometricPrecision
pode tornar essas fontes visualmente boas.Em SVG, quando o texto é escalado para cima ou para baixo, os navegadores calculam o tamanho final do texto (que é o tamanho de fonte específicado e a escala aplicada) e requer uma fonte de tamanho computado à partir das fontes do sistema. Mas se você requer um tamanho de fonte de, digamos, 9 com a escala de 140%, o resultado do tamanho da fonte de 12.6 não explicitamente existe no sistema, então o browser ira arredondar o tamanho da fonte para 12.
Mas a propriedade
geometricPrecision
- quando totalmente surpotada pelo mecanismo de renderização - deixa você escalar seu texto fluidamente. Para fatores de larga escala, você pode ver uma renderização de texto não tão bonita, mas com o tamanho esperado - nem arredondado para cima ou para baixo para o mais próximo tamanho suportado pelo sistema Windows ou Linux.Navegadores WebKit precisamente aplicam o valor específico, mas os navegadores Gecko tratam o esse valor como
optimizeLegibility
.
Exemplos
/* make sure all fonts in the HTML document display in all its glory, but avoid inadequate ligatures in class foo elements */ body { text-rendering: optimizeLegibility; } .foo { text-rendering: optimizeSpeed; }
Live Example
CSS code | Kerning | Ligatures |
---|---|---|
font: 19.9px 'DejaVu Serif',Constantia; | LYoWAT | ff fi fl ffl |
font: 20px 'DejaVu Serif',Constantia; | LYoWAT | ff fi fl ffl |
font: 3em 'DejaVu Serif',Constantia; text-rendering: optimizeSpeed; |
LYoWAT | ff fi fl ffl |
font: 3em 'Dejavu Serif',Constantia; text-rendering: optimizeLegibility; |
LYoWAT | ff fi fl ffl |
Gecko Notes
O valor padrão de 20px para auto
pode ser alterado na propriedade browser.display.auto_quality_min_font_size
do navegador.
A opção optimizeSpeed não tem efeito na versão 2.0 do Gecko (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), devido ao código padrão de renderização de texto que já é muito rápido e não existe até o momento um código mais rápido para esse trabalho. Veja detalhes em bug 595688.
Especificações
Specification | Status | Comment |
---|---|---|
Scalable Vector Graphics (SVG) 1.1 (Second Edition) The definition of 'text-rendering' in that specification. |
Recommendation |
Essa é uma especificação SVG, e não é definida em nenhum padrão CSS. Gecko (Firefox) e WebKit aplicam a propriedade text-rendering
para códigos HTML e XML.
Compatibilidade entre Navegadores
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Suporte basico para plataformas Windows e Linux |
4.0 but the implementation known bugs on Windows and Linux which can break font substitition, small-caps, letter-spacing or cause text to overlap |
3.0 (1.9) | Não suportado | Não suportado | 5.0 (532.5) |
Surpote basico para outros sistemas operacionais | Não suportado | Não suportado | Não suportado | Não suportado | Não suportado |
auto |
Chrome treats this as optimizeSpeed .Work is continuing onWebKit bug 41363 |
Se o tamanho da fonte for maior ou igual a 20px, navegadores Gecko usam o valor |
Não suportado | Não suportado | Safari treats this as optimizeSpeed .Work is continuing onWebKit bug 41363 |
geometricPrecision |
13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system. Introduced in WebKit 535.1 WebKit bug 60317 |
Gecko trata esse valor da mesma forma que trata o valor optimizeLegibility . |
Não suportado | Não suportado |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | ? | ? | ? | ? | ? |