gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Documentation improvements about CSS fonts (#24914)

Browse Source
This commit is contained in:
Everton Braga
2019-08-14 19:41:00 -03:00
committed by Randell Dawson
parent 347d1065ee
commit 2784c83782
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
guide/portuguese/css/fonts/index.md
View File

@ -4,13 +4,13 @@ localeTitle: Fontes
--- ---
## 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 ### Família de fontes
A família de fontes de um texto é definida simplesmente usando a propriedade `font-family` . 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 ```css
p { 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 ### 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: 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: Existem diferentes tipos de valores de tamanho de fonte:
* `px` (pixels) - O tamanho padrão do texto sendo `16px` * `px` (pixels) - O tamanho padrão do texto sendo `16px`
* `em` - `1em` = o tamanho atual da fonte, então `1em` = `16px` (recomendado pelo W3C) * `em` - `1em` = o tamanho padrão da fonte, ou seja `1em` = `16px` (recomendação da W3C)
* `small` , `medium` , `large` - conhecido como valores de tamanho absoluto * `small` , `medium` , `large` - conhecidos como valores de tamanho absoluto
* `%` - porcentagens * `%` - porcentagens
```css ```css
@ -75,7 +75,7 @@ Existem diferentes tipos de valores de tamanho de fonte:
### Espessura da 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 ```css
p { p {
@ -96,7 +96,7 @@ O tamanho do texto pode ser definido com uma unidade vw (largura da viewport). D
### Variante de fonte ### 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 ```css
p.small { p.small {
@ -108,4 +108,4 @@ p.small {
* [Escolas W3 - Fonte CSS](https://www.w3schools.com/css/css_font.asp) * [Escolas W3 - Fonte CSS](https://www.w3schools.com/css/css_font.asp)
* [MND - Fonte CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/font) * [MND - Fonte CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
* [CSSFontStack](https://www.cssfontstack.com/) * [CSSFontStack](https://www.cssfontstack.com/)