Fonts no CSS: Uma das características mais importantes do CSS é a capacidade de controlar as fontes usadas em um site. Neste artigo, vamos explorar em detalhes como as fontes funcionam no CSS.
Propriedades de Fonte no CSS
font-family
A propriedade font-family é usada para especificar a família da fonte a ser usada em um elemento.
body {
font-family: Arial, sans-serif;
}Neste exemplo, o navegador tentará usar a fonte Arial. Se não conseguir encontrar a fonte Arial, ele usará qualquer fonte sans-serif disponível.
font-weight
A propriedade font-weight é usada para definir a espessura ou o peso da fonte.
h1 {
font-weight: bold;
}Neste exemplo, o texto dentro dos elementos h1 será exibido em negrito. A propriedade font-weight recebe valores descritivos que vão de um peso de fonte do mais leve até o mais pesado recebendo os valores: lighter, normal, bold, bolder.
Esses valores podem ser numéricos e também vão da fonte mais leve inicinado o valor em 100 até a fonte mais pesada que recebe o valor 900.
font-stretch
A propriedade font-stretch é usada para selecionar uma fonte normal, condensada ou estendida, se disponível.
p {
font-stretch: condensed;
}Neste exemplo, o texto dentro dos elementos p será exibido em uma fonte condensada, se disponível.
font-style
A propriedade font-style é usada para definir o estilo da fonte, como normal, itálico ou oblíquo.
em {
font-style: italic;
}Neste exemplo, o texto dentro dos elementos em será exibido em itálico.
font-size
A propriedade font-size é usada para definir o tamanho da fonte.
body {
font-size: 16px;
}Neste exemplo, o texto dentro do elemento body será exibido com um tamanho de fonte de 16 pixels.
font-variant
A propriedade font-variant é usada para selecionar uma variante de fonte normal, small caps – (pequenas maiúsculas) ou outras variantes, se disponíveis.
p {
font-variant: small-caps;
}Neste exemplo, o texto dentro dos elementos p será exibido em pequenas maiúsculas, se disponível.
font
A propriedade font é uma propriedade abreviada usada para definir várias propriedades de fonte de uma vez.
body {
font: normal small-caps bold 16px/1.5 Arial, sans-serif;
}Neste exemplo, várias propriedades de fonte são definidas de uma vez. O texto dentro do elemento body será exibido com um estilo normal, variante de pequenas maiúsculas, peso em negrito, tamanho de 16 pixels, altura de linha de 1.5 e família de fontes Arial ou sans-serif.
Carregando Fontes Personalizadas Usando @font-face
O CSS permite que você carregue fontes personalizadas usando a regra @font-face.
@font-face {
font-family: 'MinhaFonte';
src: url('MinhaFonte.woff2') format('woff2'),
url('MinhaFonte.woff') format('woff');
}Neste exemplo, uma fonte personalizada chamada ‘MinhaFonte’ está sendo carregada a partir de dois arquivos, ‘MinhaFonte.woff2’ e ‘MinhaFonte.woff’.
Observação Sobre Performance
Carregar fontes personalizadas pode ter um impacto na performance do seu site. As fontes são recursos que precisam ser baixados pelo navegador, o que pode aumentar o tempo de carregamento da página. Portanto, é importante usar fontes personalizadas com moderação e considerar o uso de técnicas de otimização, como o pré-carregamento de fontes.
Conclusão
Fonts no CSS: As fontes no CSS são uma ferramenta poderosa que permite aos desenvolvedores criar sites visualmente atraentes e acessíveis. Compreender e utilizar as propriedades de fonte do CSS pode melhorar significativamente a qualidade do seu código e a experiência do usuário.
E para que você continue estudando e evoluindo nada melhor do que um computador com os melhores preços, marcas renomadas e confiança na entrega que só a Amazon oferece. Clique aqui é veja as melhores promoções das melhores marcas de notebooks e com a melhor entrega do mercado!!!
