diff options
Diffstat (limited to 'files/pt-br/web/css/font-weight/index.html')
| -rw-r--r-- | files/pt-br/web/css/font-weight/index.html | 284 |
1 files changed, 284 insertions, 0 deletions
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 +--- +<div>{{CSSRef}}</div> + +<h2 id="Resumo">Resumo</h2> + +<p>A propriedade <a href="/en-US/docs/CSS" title="CSS">CSS </a><code>font-weight</code> especifica o peso ou a intensidade da fonte (ex.: negrito). Algumas fontes oferecem apenas as opções <code>normal</code> e negrito.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="brush:css">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; +</pre> + +<h3 id="Valores">Valores</h3> + +<dl> + <dt><code>normal</code></dt> + <dd>Peso normal. O mesmo que <code>400</code>.</dd> + <dt><code>bold</code></dt> + <dd>Peso negrito. O mesmo que <code>700</code>.</dd> + <dt><code>lighter</code></dt> + <dd>Um peso de fonte mais claro que o elemento pai (dentre os pesos disponíveis da fonte).</dd> + <dt><code>bolder</code></dt> + <dd>Um peso de fonte mais escuro que o elemento pai (dentre os pesos disponíveis da fonte).</dd> + <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt> + <dd>Pesos numéricos para fontes que oferecem mais que normal e negrito.</dd> +</dl> + +<h3 id="Contingência">Contingência</h3> + +<p>Caso o dado peso solicitado não esteja disponível, a seguinte heurística é usada para determinar o peso efetivo a ser usado:</p> + +<ul> + <li>Se solicitado um peso maior que <code>500</code>, usa-se o próximo peso mais escuro (ou, se não houver, usa-se o próximo mais claro).</li> + <li>Se solicitado um peso menor que <code>400</code>, usa-se o próximo peso mais claro (ou, se não houver, usa-se o próximo mais escuro).</li> + <li>Se solicitado o peso <code>400</code>, usa-se o peso <code>500</code>. Se <code>500</code> não estiver disponível, usa-se a heurística para peso menor do que 500.</li> + <li>Se solicitado o peso <code>500</code>, usa-se o peso <code>400</code>. Se <code>400</code> não estiver disponível, usa-se a heurística para peso menor do que 400.</li> +</ul> + +<p>Isto significa que para fontes que oferecem apenas <code style="font-style: normal;">normal</code> e negrito, <code style="font-style: normal;">100</code>-<code>500</code> significa normal, e <code style="font-style: normal;">600</code>-<code style="font-style: normal;">900</code> significa negrito.</p> + +<h3 id="Significado_de_pesos_relativos">Significado de pesos relativos</h3> + +<p>Quando for solicitado <code>lighter</code> ou <code>bolder</code>, a seguinte tabela é usada para calcular o peso absoluto do elemento:</p> + +<table> + <thead> + <tr> + <th>Valor herdado</th> + <th><code>bolder</code></th> + <th><code>lighter</code></th> + </tr> + </thead> + <tbody> + <tr> + <th>100</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>200</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>300</th> + <td>400</td> + <td>100</td> + </tr> + <tr> + <th>400</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>500</th> + <td>700</td> + <td>100</td> + </tr> + <tr> + <th>600</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>700</th> + <td>900</td> + <td>400</td> + </tr> + <tr> + <th>800</th> + <td>900</td> + <td>700</td> + </tr> + <tr> + <th>900</th> + <td>900</td> + <td>700</td> + </tr> + </tbody> +</table> + +<h3 id="Mapeamento_de_nomes_comuns_de_pesos">Mapeamento de nomes comuns de pesos</h3> + +<p>Os valores de 100 a 900 correspondem grosseiramente aos seguintes nomes comuns de pesos:</p> + +<dl> + <dt><code>100</code></dt> + <dd>Thin (Hairline)</dd> + <dt><code>200</code></dt> + <dd>Extra Light (Ultra Light, Ultra Fino)</dd> + <dt><code>300</code></dt> + <dd>Light (Fino)</dd> + <dt><code>400</code></dt> + <dd>Normal</dd> + <dt><code>500</code></dt> + <dd>Medium (Médio)</dd> + <dt><code>600</code></dt> + <dd>Semi Bold (Demi Bold, Semi Negrito)</dd> + <dt><code>700</code></dt> + <dd>Bold (Negrito)</dd> + <dt><code>800</code></dt> + <dd>Extra Bold (Ultra Bold, Super Negrito)</dd> + <dt><code>900</code></dt> + <dd>Black (Heavy)</dd> +</dl> + +<h3 id="Interpolação">Interpolação</h3> + +<p>Um valor de <code>font-weight</code> é 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.</p> + +<h3 id="Sintaxe_formal">Sintaxe formal</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + + +<h2 id="Exemplos">Exemplos</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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> +</pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: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; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Exemplos","400","300")}}</p> + +<h2 id="Especificações">Especificações</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Especificações</th> + <th scope="col">Status</th> + <th scope="col">Comentário</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Fonts')}}</td> + <td>Sem alterações.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td>Permite animação do atributo <code>font-weight</code>.</td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Sem alterações.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_browser">Compatibilidade de browser</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 básico</td> + <td>2.0</td> + <td>{{CompatGeckoDesktop(1.0)}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.3</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>Suporte básico</td> + <td>1.0</td> + <td>{{CompatGeckoMobile(1.0)}}</td> + <td>6.0</td> + <td>6.0</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> |