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/font-weight/index.html | 284 +++++++++++++++++++++++++++++ 1 file changed, 284 insertions(+) create mode 100644 files/pt-br/web/css/font-weight/index.html (limited to 'files/pt-br/web/css/font-weight/index.html') diff --git a/files/pt-br/web/css/font-weight/index.html b/files/pt-br/web/css/font-weight/index.html new file mode 100644 index 0000000000..33d4118762 --- /dev/null +++ b/files/pt-br/web/css/font-weight/index.html @@ -0,0 +1,284 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

Resumo

+ +

A propriedade CSS font-weight especifica o peso ou a intensidade da fonte (ex.: negrito). Algumas fontes oferecem apenas as opções normal e negrito.

+ +

{{cssinfo}}

+ +

Sintaxe

+ +
font-weight: normal;
+font-weight: bold;
+
+/* Relativo ao elemento pai */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Valores globais */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

Valores

+ +
+
normal
+
Peso normal. O mesmo que 400.
+
bold
+
Peso negrito. O mesmo que 700.
+
lighter
+
Um peso de fonte mais claro que o elemento pai (dentre os pesos disponíveis da fonte).
+
bolder
+
Um peso de fonte mais escuro que o elemento pai (dentre os pesos disponíveis da fonte).
+
100, 200, 300, 400, 500, 600, 700, 800, 900
+
Pesos numéricos para fontes que oferecem mais que normal e negrito.
+
+ +

Contingência

+ +

Caso o dado peso solicitado não esteja disponível, a seguinte heurística é usada para determinar o peso efetivo a ser usado:

+ + + +

Isto significa que para fontes que oferecem apenas normal e negrito, 100-500 significa normal, e 600-900 significa negrito.

+ +

Significado de pesos relativos

+ +

Quando for solicitado lighter ou bolder, a seguinte tabela é usada para calcular o peso absoluto do elemento:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Valor herdadobolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

Mapeamento de nomes comuns de pesos

+ +

Os valores de 100 a 900 correspondem grosseiramente aos seguintes nomes comuns de pesos:

+ +
+
100
+
Thin (Hairline)
+
200
+
Extra Light (Ultra Light, Ultra Fino)
+
300
+
Light (Fino)
+
400
+
Normal
+
500
+
Medium (Médio)
+
600
+
Semi Bold (Demi Bold, Semi Negrito)
+
700
+
Bold (Negrito)
+
800
+
Extra Bold (Ultra Bold, Super Negrito)
+
900
+
Black (Heavy)
+
+ +

Interpolação

+ +

Um valor de font-weight é interpolado com passos discretos (múltiplos de 100). A interpolação acontece no espaço de números reais e depois é feita uma conversão para números inteiros por arredondamento para o múltiplo de 100 mais próximo. Valores exatamente entre dois múltiplos de 100 são arredondados para mais.

+ +

Sintaxe formal

+ +
{{csssyntax}}
+ + +

Exemplos

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps darker than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}
+ +

Result

+ +

{{EmbedLiveSample("Exemplos","400","300")}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçõesStatusComentário
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}Sem alterações.
{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}{{Spec2('CSS3 Transitions')}}Permite animação do atributo font-weight.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}Sem alterações.
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}} 
+ +

Compatibilidade de browser

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Suporte básico2.0{{CompatGeckoDesktop(1.0)}}3.03.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Suporte básico1.0{{CompatGeckoMobile(1.0)}}6.06.03.1
+
-- cgit v1.2.3-54-g00ecf