4.1 Propriedade font-style
O CSS oferece muitas propriedades para gerenciar fontes e sua aparência em páginas web. As propriedades font-style, font-variant e font-stretch permitem configurar o estilo do texto, sua exibição e largura. Vamos olhar cada uma dessas propriedades em detalhe.
A propriedade font-style define o estilo do texto. Ela é usada para definir a inclinação (itálico) ou estilo comum do texto.
Valores:
normal: estilo de texto comum (padrão)italic: texto inclinado (itálico)oblique: texto inclinado, semelhante ao italic, mas difere no ângulo de inclinação
Exemplo de uso:
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
<body>
<p class="normal">Este é um texto normal.</p>
<p class="italic">Este é um texto inclinado (itálico).</p>
<p class="oblique">Este é um texto inclinado (oblique).</p>
</body>
4.2 Propriedade font-variant
A propriedade font-variant controla a exibição do texto em versaletes. Ela permite alterar a fonte de forma que todas as letras se tornem maiúsculas, mas com tamanho menor para as letras originalmente minúsculas.
Valores:
normal: texto normal (padrão)small-caps: texto em versaletes
Exemplo de uso:
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
<body>
<p class="normal">Este é um texto normal.</p>
<p class="small-caps">Este é um texto em versaletes.</p>
</body>
Valores adicionais (CSS Fonts Level 4)
O CSS Fonts Level 4 adiciona valores adicionais para a propriedade font-variant, como all-small-caps, petite-caps, all-petite-caps, unicase e titling-caps. No entanto, eles não são suportados por todos os navegadores.
4.3 Propriedade font-stretch
A propriedade font-stretch gerencia o nível de compressão ou extensão da fonte. Ela altera a largura da fonte sem afetar a altura e é usada para escolher uma variante de fonte adequada, se estiver disponível.
Valores:
normal: largura de fonte comum (padrão)ultra-condensed: fonte extremamente comprimidaextra-condensed: fonte muito comprimidacondensed: fonte comprimidasemi-condensed: fonte moderadamente comprimidasemi-expanded: fonte moderadamente estendidaexpanded: fonte estendidaextra-expanded: fonte muito estendidaultra-expanded: fonte extremamente estendida
Exemplo de uso:
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
<body>
<p class="normal">Este é um texto com largura de fonte normal.</p>
<p class="condensed">Este é um texto com largura de fonte comprimida.</p>
<p class="expanded">Este é um texto com largura de fonte estendida.</p>
</body>
GO TO FULL VERSION