Fontes CSS

As fontes são os componentes mais significativos que vemos em qualquer site; portanto, ao criar um site, escolher a fonte correta/adequada é muito importante. As fontes aprimoram a aparência visual de qualquer site e o uso da fonte apropriada ajuda a aumentar a legibilidade e a eficácia de qualquer site.

Famílias de fontes genéricas em CSS

Existem cinco tipos de famílias de fontes no CSS I.e. Serif, sans-serif, monoespácia, fantasia e cursiva. Todas essas famílias de fontes são usadas para especificar a aparência/forma das fontes:

1. Fontes serif tem pequenos golpes elegantes na beira das letras
2. Sem serifa Fontes têm cartas simples, sem derrame. Essas fontes são facilmente legíveis.
3. Monospácia As fontes são letras de largura fixa e de largura fixa. Usado principalmente para representar o código de programação
4. Cursivo Fontes são muito semelhantes à escrita humana
5. Fantasia Fontes têm aparência decorativa/sofisticada

Diferença visual de famílias de fontes genéricas

A seguir, o Snippet fornecerá uma diretriz para entender as formas a diferença de famílias de fontes genéricas

Vários tipos de famílias de fontes genéricas

A figura abaixo é dada os diferentes tipos de cada família de fontes genéricas:

Propriedades da fonte CSS

No CSS, a aparência do texto pode ser modificada de várias maneiras, como selecionar o estilo de fonte, a família de fontes, a cor da fonte, o tamanho da fonte, etc. Como o uso correto da fonte tem um grande impacto no texto e na experiência do leitor, portanto, o CSS fornece inúmeras propriedades de fonte que podem ser usadas para personalizar a aparência de fontes. Este artigo terá como alvo as seguintes propriedades da fonte:

• família de fontes
• estilo de fonte
• font-variant
• tamanho da fonte
• espessura da fonte
• Fonte abreviada

Vamos começar com a família de fontes.

Família de fonte CSS

Esta propriedade é usada para especificar a família de fontes para qualquer elemento HTML E.g. "Arial", "Times New Roman", etc. Ou podemos usar uma família de fontes genéricas e.g. Serifa, cursiva, etc.

Exemplo

O exemplo abaixo do rumo utiliza as fontes serif para o

fontes de elemento e cursivo para o

Elementos:

Html

Fontes CSS

Primeiro parágrafo

Segundo parágrafo

CSS

H3
Fonte-família: 'Times New Roman', Times, Serif;

P
Fonte-família: cursiva;

A parte do código acima exibe a seguinte saída:

CSS no estilo de fonte

Para definir algum estilo específico para um elemento HTML, a propriedade em estilo de fonte é usada. A propriedade em estilo de fonte pode ter um valor normal, oblíquo ou em itálico.

Exemplo

Na parte abaixo do código, o estilo de fonte de

O elemento é alterado para o estilo itálico:

Html

Fontes CSS

Primeiro parágrafo

Segundo parágrafo

CSS

H3
estilo de fonte: itálico;

O trecho acima mostra o seguinte resultado:

Os valores oblíquos e normais podem ser usados ​​para a propriedade em estilo de fonte, o valor oblíquo produzirá resultados muito semelhantes ao estilo itálico.

CSS Font-Variant

Pode levar um valor de "small-caps" que converte as letras em pequenas letras maiúsculas (maiúsculas, mas menores em tamanho.

Exemplo

O código abaixo dado demonstrará o efeito da propriedade variante de fontes no

elemento:

Html

Fontes CSS

Primeiro parágrafo

Segundo parágrafo

CSS

P
Fonte-variante: pequenas capas;

O código acima fornecerá o seguinte resultado:

CSS-Size

A propriedade do tamanho da fonte é suspensa para definir o tamanho do texto e o valor do tamanho da fonte pode ser especificado como pequeno, grande, médio, etc., ou em termos de px, em, %, etc.

O código abaixo do rico especifica o tamanho da fonte para o

Elemento como extra grande:

Html

Fontes CSS

Primeiro parágrafo

Segundo parágrafo

CSS

P
tamanho de fonte: x-large;

O trecho acima gera o seguinte resultado:

A saída verifica que o texto de

elementos é maior que o tamanho normal da fonte.

CSS-POISTE

A propriedade do peso da fonte é usada para definir o peso da fonte em termos de alguns valores específicos, como ousado, normal, mais leve, etc. Pode determinar o peso em termos de um valor numérico como 100, 200, 300, etc. O maior valor especifica uma fonte mais ousada/mais espessa, enquanto o valor menor representa uma fonte mais fina.

A seguinte parte do código define o peso da fonte para o

elemento usando valor "mais ousado":

Html

Fontes CSS

Primeiro parágrafo

Segundo parágrafo

CSS

P
Peso da fonte: mais ousado;

O trecho acima produz a seguinte saída:

Propriedade abreviada da fonte em CSS

CSS fornece uma propriedade abreviada para todas as propriedades acima mencionadas. Usando abreviação "Fonte" Propriedade, podemos definir o estilo de fonte, família, variante, etc. em uma única linha.

O exemplo abaixo do ritmo demonstra como usar a propriedade abreviada da fonte no CSS:

Html

Fontes CSS

Primeiro parágrafo

Segundo parágrafo

CSS

P
Fonte: Bold 30px cursivo;

O trecho acima especifica o peso-fonte, o tamanho da fonte e a família de fontes em uma declaração usando a propriedade abreviada da fonte:

A saída acima verifica que a propriedade abreviada define com sucesso o peso, o tamanho e a família da fonte para o

elemento.

Conclusão

As famílias de fontes determinam a forma de fontes, enquanto as propriedades de estilo de fontes, peso-fonte, tamanho de fontes e variantes de fontes determinam o efeito de estilo, peso, tamanho e pequenas capas das fontes, respectivamente,. Todas essas funcionalidades podem ser realizadas nas fontes em uma única declaração usando a propriedade "Fonte" abreviada.

Este artigo apresenta uma visão abrangente do que são fontes CSS, famílias de fontes genéricas e como definir o estilo da fonte.