Documentation improvements about CSS fonts (#24914)
This commit is contained in:
committed by
Randell Dawson
parent
347d1065ee
commit
2784c83782
@ -4,13 +4,13 @@ localeTitle: Fontes
|
||||
---
|
||||
## Fontes
|
||||
|
||||
As propriedades da fonte CSS definem a família de fontes, o peso, o tamanho, a variante, a altura da linha e o estilo de um texto.
|
||||
As propriedades de fontes do CSS definem a família de fontes, o peso, o tamanho, a variante, a altura da linha e o estilo de um texto.
|
||||
|
||||
### Família de fontes
|
||||
|
||||
A família de fontes de um texto é definida simplesmente usando a propriedade `font-family` .
|
||||
|
||||
Ele funciona com um sistema de _fallback_ , se o seu navegador não suporta a primeira fonte, ele tenta com o próximo e assim por diante. Se o nome da fonte for maior que uma palavra, ela deve estar entre aspas.
|
||||
Ele funciona com um sistema de _fallback_ ou cascata, ou seja, se o seu navegador não suporta a primeira fonte, ele tenta com o próximo e assim por diante. Se o nome da fonte for maior do que uma palavra, ela deve vir entre aspas.
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -18,11 +18,11 @@ p {
|
||||
}
|
||||
```
|
||||
|
||||
No exemplo acima, "Times New Roman" é o da fonte, enquanto "serif" é o . Nomes genéricos são usados como fallback mecanismo para preservar o estilo se o nome da família não estiver disponível. Um nome genérico deve ser sempre o último item da lista de nomes de famílias de fontes. Genérico nomes de família são serif, sans-serif, monospace, cursiva, fantasia, system-ui.
|
||||
No exemplo acima, "Times New Roman" é nome o da fonte, enquanto "serif" é o estilo. Nomes genéricos são usados como fallback, um mecanismo para preservar o estilo da font caso o nome da família não esteja disponível (evitando que o layout fique inconsistente). Um nome genérico deve vir por último, pois eles são uma segunda opção. Alguns nomes genéricos: serif, sans-serif, monospace, cursiva, fantasia, system-ui.
|
||||
|
||||
### Estilo de fonte
|
||||
|
||||
A propriedade `font-style` pode ser usada para especificar texto em itálico.
|
||||
A propriedade `font-style` pode ser usada para especificar uma estilização ao texto.
|
||||
|
||||
Esta propriedade tem 3 valores:
|
||||
|
||||
@ -51,8 +51,8 @@ A propriedade `font-size` define o tamanho do texto.
|
||||
Existem diferentes tipos de valores de tamanho de fonte:
|
||||
|
||||
* `px` (pixels) - O tamanho padrão do texto sendo `16px`
|
||||
* `em` - `1em` = o tamanho atual da fonte, então `1em` = `16px` (recomendado pelo W3C)
|
||||
* `small` , `medium` , `large` - conhecido como valores de tamanho absoluto
|
||||
* `em` - `1em` = o tamanho padrão da fonte, ou seja `1em` = `16px` (recomendação da W3C)
|
||||
* `small` , `medium` , `large` - conhecidos como valores de tamanho absoluto
|
||||
* `%` - porcentagens
|
||||
|
||||
```css
|
||||
@ -75,7 +75,7 @@ Existem diferentes tipos de valores de tamanho de fonte:
|
||||
|
||||
### Espessura da fonte
|
||||
|
||||
A propriedade `font-weight` especifica o peso (ou negrito) da fonte. Aceita palavras-chave ( `bold` , `normal` , `bolder` , `bolder` `lighter` ) ou palavras-chave numéricas ( `100` , `200` , `300` , `400` etc.) `400` é o mesmo que o `normal` .
|
||||
A propriedade `font-weight` especifica o peso (ou negrito) da fonte. Ela aceita tanto palavras-chave nominais, como ( `bold` , `normal` , `bolder` , `bolder` `lighter` ) como palavras-chave numéricas ( `100` , `200` , `300` , `400` etc). `400` é o mesmo que `normal` .
|
||||
|
||||
```css
|
||||
p {
|
||||
@ -96,7 +96,7 @@ O tamanho do texto pode ser definido com uma unidade vw (largura da viewport). D
|
||||
|
||||
### Variante de fonte
|
||||
|
||||
A propriedade `font-variant` especifica se um texto deve ser exibido em uma fonte small-caps (onde todas as letras minúsculas são convertidas em letras maiúsculas enquanto aparecem em um tamanho de fonte menor do que as letras maiúsculas originais no texto).
|
||||
A propriedade `font-variant` especifica se um texto deve ser exibido em uma fonte small-caps (onde todas as letras ficam em caixa-alta enquanto aparecem em um tamanho de fonte menor do que as letras originais no texto).
|
||||
|
||||
```css
|
||||
p.small {
|
||||
|
Reference in New Issue
Block a user