text-rendering

  • Revision slug: CSS/text-rendering
  • Revision title: text-rendering
  • Revision id: 328575
  • Criado:
  • Criador: lmiranda
  • É a revisão atual? Não
  • Comentar

Conteúdo da revisão

{{ CSSRef() }}

Summary

A propriedade CSS text-rendering prove informações para o mecanismo de renderização sobre o que otimizar no momento em que ele renderiza. Os navegadores fazem escolhas entre velocidade, legibilidade e precisão geométrica. A propriedade text-rendering é uma propriedade SVG que não é definida como um 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).

  • {{ Xref_cssinitial() }} auto
  • Applies to all elements
  • {{ Xref_cssinherited() }} sim
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} ?

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

The 20px threshold value of the auto keyword can be changed by changing the browser.display.auto_quality_min_font_size preference.

The optimizeSpeed option has no effect on Gecko 2.0 {{ geckoRelease("2.0") }}, because the standard code for text rendering is already very fast and there is not a faster code path at this time. See {{ bug(595688) }} for details.

Specifications

Specification Status Comment
{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }} {{ Spec2('SVG1.1') }}  

This is an SVG property, it is not defined in any CSS standard. Gecko (Firefox) and WebKit apply text-rendering also to HTML and XML content.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support for Windows and 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) {{ CompatNo() }} {{ CompatNo() }} 5.0 (532.5)
Basic support for other operating systems {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
auto Chrome treats this as optimizeSpeed.
Work is continuing on{{ Webkitbug("41363") }}
If the font size is 20 px or higher, Gecko browsers use optimizeLegibility; for smaller text, they use optimizeSpeed. {{ CompatNo() }} {{ CompatNo() }} Safari treats this as optimizeSpeed.
Work is continuing on{{ Webkitbug("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   {{ Webkitbug("60317") }}
Gecko treats the value the same as optimizeLegibility.  {{ CompatNo() }}  {{ CompatNo() }}  
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

See also

  • {{ CSS_Reference:Text() }}

Fonte da revisão

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>A propriedade CSS <code>text-rendering</code> prove informações para o mecanismo de renderização sobre o que otimizar no momento em que ele renderiza. Os navegadores fazem escolhas entre velocidade, legibilidade e precisão geométrica. A propriedade text-rendering é uma propriedade SVG que não é definida como um 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.&nbsp;</p>
<p>Um efeito bastante visível é:<code> optimizeLegibility </code>que habilita ligaduras (ff, fi, fl etc.) para algumas fontes com o texto menores que 20px como, por exemplo, fontes da Microsoft (<em>Calibri, Candara, Constantia </em>e<em> Corbel</em> ou a família de fontes <em>DejaVu</em>).</p>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> auto</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> sim</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> ?</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
text-rendering:  auto | optimizeSpeed | optimizeLegibility | geometricPrecision | inherit</pre>
<h3 id="Valores">Valores</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    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.</dd>
  <dt>
    <code>optimizeSpeed</code></dt>
  <dd>
    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 kerning<sup>1</sup> e ligatures<sup>2</sup>.</dd>
  <dt>
    <code>optimizeLegibility</code></dt>
  <dd>
    O navegador prioriza legibilidade sobre a velocidade de renderização e precisão geométrica. Essa propriedade habilita o kerning e ligatures opcionais.</dd>
  <dt>
    <code>geometricPrecision</code></dt>
  <dd>
    <p>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, <code>geometricPrecision</code> pode tornar essas fontes visualmente boas.</p>
    <p>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.</p>
    <p>Mas a propriedade <code>geometricPrecision </code>- 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.</p>
    <p>Navegadores WebKit precisamente aplicam o valor específico, mas os navegadores Gecko tratam o esse valor como <code>optimizeLegibility</code>.</p>
  </dd>
</dl>
<h2 id="Exemplos">Exemplos</h2>
<pre class="brush:css">
/* 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; }</pre>
<h4 id="Live_Example">Live Example</h4>
<table class="standard-table">
  <tbody>
    <tr>
      <th>CSS code</th>
      <th>Kerning</th>
      <th>Ligatures</th>
    </tr>
    <tr style="font: 19.9px 'DejaVu Serif',Constantia">
      <td style="font:medium monospace">font: 19.9px 'DejaVu Serif',Constantia;</td>
      <td>LYoWAT</td>
      <td>ff fi fl ffl</td>
    </tr>
    <tr style="font: 20px 'DejaVu Serif',Constantia">
      <td style="font:medium monospace">font: 20px 'DejaVu Serif',Constantia;</td>
      <td>LYoWAT</td>
      <td>ff fi fl ffl</td>
    </tr>
    <tr style="font: 3em 'DejaVu Serif',Constantia; text-rendering:optimizeSpeed;">
      <td style="font:medium monospace">font: 3em 'DejaVu Serif',Constantia;<br />
        text-rendering: optimizeSpeed;</td>
      <td>LYoWAT</td>
      <td>ff fi fl ffl</td>
    </tr>
    <tr style="font: 3em 'Dejavu Serif',Constantia; text-rendering:optimizeLegibility;">
      <td style="font:medium monospace">font: 3em 'Dejavu Serif',Constantia;<br />
        text-rendering: optimizeLegibility;</td>
      <td>LYoWAT</td>
      <td>ff fi fl ffl</td>
    </tr>
  </tbody>
</table>
<h3 id="Gecko_Notes">Gecko Notes</h3>
<p>The 20px threshold value of the<code> auto </code>keyword can be changed by changing the <code>browser.display.auto_quality_min_font_size</code> preference.</p>
<p>The <code>optimizeSpeed</code> option has no effect on Gecko 2.0 {{ geckoRelease("2.0") }}, because the standard code for text rendering is already very fast and there is not a faster code path at this time. See {{ bug(595688) }} for details.</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }}</td>
      <td>{{ Spec2('SVG1.1') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<p name="Browser_Compatibility">This is an SVG property, it is not defined in any CSS standard. Gecko (Firefox) and WebKit apply<code> text-rendering </code>also to HTML and XML content.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Basic support for Windows and Linux</td>
        <td>
          <p>4.0 but the&nbsp;implementation known bugs on Windows and Linux which can break&nbsp;<a href="http://crbug.com/114719" title="http://crbug.com/114719">font substitition</a>, <a href="http://crbug.com/51973" title="http://crbug.com/51973">small-caps</a>, <a href="http://crbug.com/55458" title="http://crbug.com/55458">letter-spacing</a>&nbsp;or cause <a href="http://crbug.com/149548" title="http://crbug.com/149548">text to overlap</a></p>
        </td>
        <td><strong>3.0</strong>&nbsp;(1.9)</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>5.0 (532.5)</td>
      </tr>
      <tr>
        <td>Basic support for other operating systems</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>auto</code></td>
        <td>Chrome treats this as&nbsp;<code>optimizeSpeed</code>.<br />
          Work is continuing on{{ Webkitbug("41363") }}</td>
        <td>If the font size is 20 px or higher, Gecko browsers use <code>optimizeLegibility</code>; for smaller text, they use <code>optimizeSpeed</code>.</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>Safari treats this as&nbsp;<code>optimizeSpeed</code>.<br />
          Work is continuing on{{ Webkitbug("41363") }}</td>
      </tr>
      <tr>
        <td><code>geometricPrecision</code></td>
        <td>13 supports true geometric precision, without rounding up or down to the nearest supported font size in the operating system.<br />
          Introduced in WebKit 535.1 &nbsp; {{ Webkitbug("60317") }}</td>
        <td>Gecko treats the value the same as&nbsp;<code>optimizeLegibility</code>.</td>
        <td>&nbsp;{{ CompatNo() }}</td>
        <td>&nbsp;{{ CompatNo() }}</td>
        <td>&nbsp;</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE&nbsp;Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="See_also">See also</h2>
<ul>
  <li>{{ CSS_Reference:Text() }}</li>
</ul>
Reverter para esta revisão