From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/web/css/text-rendering/index.html | 189 ++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 files/pt-br/web/css/text-rendering/index.html (limited to 'files/pt-br/web/css/text-rendering') diff --git a/files/pt-br/web/css/text-rendering/index.html b/files/pt-br/web/css/text-rendering/index.html new file mode 100644 index 0000000000..8bb1230959 --- /dev/null +++ b/files/pt-br/web/css/text-rendering/index.html @@ -0,0 +1,189 @@ +--- +title: text-rendering +slug: Web/CSS/text-rendering +translation_of: Web/CSS/text-rendering +--- +

{{ CSSRef() }}

+ +

Sumário

+ +

A propriedade CSS text-rendering 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 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 é o 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).

+ +

{{cssinfo}}

+ +

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
+
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 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 codeKerningLigatures
font: 19.9px 'DejaVu Serif',Constantia;LYoWATff fi fl ffl
font: 20px 'DejaVu Serif',Constantia;LYoWATff fi fl ffl
font: 3em 'DejaVu Serif',Constantia;
+ text-rendering: optimizeSpeed;		LYoWATff fi fl ffl
font: 3em 'Dejavu Serif',Constantia;
+ text-rendering: optimizeLegibility;		LYoWATff 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 {{ 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

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{ 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 para códigos HTML e XML.

+ +

Compatibilidade entre Navegadores

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (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() }}
autoChrome 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") }}
geometricPrecision13 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() }} 
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
-- cgit v1.2.3-54-g00ecf