1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
title: text-rendering
slug: Web/CSS/text-rendering
translation_of: Web/CSS/text-rendering
---
<p>{{ CSSRef() }}</p>
<h2 id="Sumário">Sumário</h2>
<p>A propriedade CSS <code>text-rendering</code> provê 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 <code>text-rendering</code> é 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. </p>
<p>Um efeito bastante visível é o <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>
<p>{{cssinfo}}</p>
<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>O 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>O valor padrão de 20px para <code>auto</code> pode ser alterado na propriedade <code>browser.display.auto_quality_min_font_size </code>do navegador.</p>
<p>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) }}.</p>
<h2 id="Especificações">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> </td>
</tr>
</tbody>
</table>
<p>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> para códigos HTML e XML.</p>
<h2 id="Browser_compatibility">Compatibilidade com 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 implementation known bugs on Windows and Linux which can break <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">letter-spacing</a> or cause <a href="http://crbug.com/149548">text to overlap</a></p>
</td>
<td><strong>3.0</strong> (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 <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 <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 {{ Webkitbug("60317") }}</td>
<td>Gecko trata esse valor da mesma forma que trata o valor <code>optimizeLegibility</code>.</td>
<td> {{ CompatNo() }}</td>
<td> {{ CompatNo() }}</td>
<td> </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 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>
|
