3.1 KiB
title | localeTitle |
---|---|
Fonts | 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.
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.
p {
font-family: "Times New Roman", Times, serif;
}
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.
Estilo de fonte
A propriedade font-style
pode ser usada para especificar texto em itálico.
Esta propriedade tem 3 valores:
- normal - Texto mostrado normalmente
- itálico - Texto mostrado em itálico
- oblíqua - texto mostrado inclinado
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
Tamanho da fonte
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 sendo16px
em
-1em
= o tamanho atual da fonte, então1em
=16px
(recomendado pelo W3C)small
,medium
,large
- conhecido como valores de tamanho absoluto%
- porcentagens
.with-pixels {
font-size: 14px;
}
.with-ems {
font-size: 0.875em;
}
.with-absolute {
font-size: large;
}
.with-percentage {
font-size: 80%;
}
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
.
p {
font-weight: bold
}
Resposta da fonte
O tamanho do texto pode ser definido com uma unidade vw (largura da viewport). Dessa forma, o tamanho do texto seguirá o tamanho da janela do navegador.
<h1 style="font-size:10vw">Hello World</h1>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
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).
p.small {
font-variant: small-caps;
}