text-rendering

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

Conteúdo da revisão

{{ CSSRef() }}

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. Os navegadores fazem 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).

  • {{ 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 para otimizaçao de velocidade, legibilidade e precisão geométrica no momento de renderizaçao do texto. Para diferenças em como esse valor é interpretado pelo navegador, veja a tabela de compatibilidades.
optimizeSpeed
O navegador prioriza a velocidade de renderização no momento da renderização. Legibilidade e precisão geométrica tem prioridades menores. Essa opção desabilita o kerning1 e ligatures2.
optimizeLegibility
O navegador prioriza a legibilidade. Velocidade de renderização e precisão geométrica nesse caso, são menos prioritários. Essa propriedade habilita o kerning1 e ligatures2 opcionais.
geometricPrecision

Nesse caso, o browser prioriza a precisão geométrica. 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 tamanho do texto é alterado para mais ou para menos, os navegadores calculam o tamanho final do texto (que é o tamanho de fonte especificado e a escala aplicada) e requer uma fonte de tamanho calculado à 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 especificado. Já 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

Notas Gecko

O valor padrão de 20px para o valor 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 {{ geckoRelease("2.0") }}, 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
{{ SpecName('SVG1.1', 'painting.html#TextRenderingProperty', 'text-rendering') }} {{ Spec2('SVG1.1') }}  

Essa é uma especificação SVG, e não é definida em nenhum padrão CSS. Gecko (Firefox) e WebKit aplicam a propriedade text-rendering também em códigos HTML e XML.

Compatibilidade entre Navegadores

{{ CompatibilityTable() }}

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) {{ CompatNo() }} {{ CompatNo() }} 5.0 (532.5)
Surpote basico para outros sistemas operacionais {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
auto Chrome treats this as optimizeSpeed.
Work is continuing on{{ Webkitbug("41363") }}

Se o tamanho da fonte for maior ou igual a 20px, navegadores Gecko usam o valor optimizeLegibility. Para fontes de tamanho menores que 20px, Gecko usa 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 trata esse valor da mesma forma que trata o valor 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="Sum.C3.A1rio">Sumário</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 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.&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 para otimizaçao de velocidade, legibilidade e precisão geométrica no momento de renderizaçao do texto. Para diferenças em como esse valor é interpretado pelo navegador, veja a tabela de compatibilidades.</dd>
  <dt>
    <code>optimizeSpeed</code></dt>
  <dd>
    O navegador prioriza a velocidade de renderização no momento da renderização. Legibilidade e precisão geométrica tem prioridades menores. Essa opção desabilita o kerning<sup>1</sup> e ligatures<sup>2</sup>.</dd>
  <dt>
    <code>optimizeLegibility</code></dt>
  <dd>
    O navegador prioriza a legibilidade. Velocidade de renderização e precisão geométrica nesse caso, são menos prioritários. Essa propriedade habilita o kerning<sup>1</sup> e ligatures<sup>2</sup> opcionais.</dd>
  <dt>
    <code>geometricPrecision</code></dt>
  <dd>
    <p>Nesse caso, o browser prioriza a precisão geométrica. 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 tamanho do texto é alterado para mais ou para menos, os navegadores calculam o tamanho final do texto (que é o tamanho de fonte especificado e a escala aplicada) e requer uma fonte de tamanho calculado à 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 especificado. Já 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">Notas Gecko</h3>
<p>O valor padrão de 20px para o valor <code>auto</code> pode ser alterado na propriedade <code>browser.display.auto_quality_min_font_size </code>do navegador.</p>
<p>A opção <code>optimizeSpeed</code> não tem efeito na versão 2.0 do Gecko {{ geckoRelease("2.0") }}, 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) }}.</p>
<h2 id="Especifica.C3.A7.C3.B5es">Especificações</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">Essa é uma especificação SVG, e não é definida em nenhum padrão CSS. Gecko (Firefox) e WebKit aplicam a propriedade <code>text-rendering</code> também em códigos HTML e XML.</p>
<h2 id="Browser_Compatibility" name="Browser_Compatibility">Compatibilidade entre Navegadores</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>Suporte basico para plataformas Windows e 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>Surpote basico para outros sistemas operacionais</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>
          <p>Se o tamanho da fonte for maior ou igual a 20px, navegadores Gecko usam o valor <code>optimizeLegibility</code>. Para fontes de tamanho menores que 20px, Gecko usa <code>optimizeSpeed</code>.</p>
        </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 trata esse valor da mesma forma que trata o valor <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