Estilizando Fontes com CSS

Neste artigo vou mostrar como podemos estilizar as fontes utilizadas nos textos em HTML, nos exemplos mostrei como estilizar a tag <p>, mas lembrando que os estilos podem ser aplicados a qualquer texto no site.

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login

(opcional) Onde podemos melhorar?

Confirmar voto
0
 (0)  (0)
Publicidade

Olá Pessoal, nesse artigo irei mostrar algumas propriedades CSS que utilizamos para estilizar as fontes dos nossos textos escritos em HTML.

No CSS 2, temos as seguintes propriedades:

  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

Vamos começar falando do font-family:

Font-family

A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada, ou seja, no caso de escolhermos a família font-family:Arial, Helvetica, sans-serif; o navegador irá procurar pela fonte Arial, caso não encontre, vai procurar por Helvetica, caso não encontre de novo ele usará a sans-serif.

No exemplo a seguir irei mostrar como aplicar esse estilo em uma tag

:

Listagem 1: Font-family
<style type="text/css">
p{
	font-family:Arial, Helvetica, sans-serif;
	}
</style>

Font-style

A propriedade font-style define a escolha da fonte em normal, italic ou oblique.

No exemplo a seguir, vou mostrar como usar o font-style italic, mas você pode usar qualquer uma dessas 3.

Listagem 2: Font-style

<style type="text/css">
p{
	font-style:italic;
	}
</style>

Font-variant

A propriedade font-variant é usada para escolher as variantes normal ou small-caps. Uma fonte small-caps é aquela que usa letras maiúsculas de tamanhos reduzidos, o normal é aquela que usa uma fonte com o tamanho normal dela.

No próximo exemplo vou mostrar a aplicação da font-variant: small-caps;

Listagem 3: Font-variant

<style type="text/css">
p{
	font-variant:small-caps;
	}
</style>

Font-weight

A propriedade font-weight define quão negrito ou "pesada" deve ser a fonte. Uma fonte pode ser normal ou bold. Alguns navegadores suportam números de 100-900 (em intervalos de 100 em 100) para definir o peso da fonte.

O código dessa propriedade deve ficar assim:

Listagem 4: Font-weight

<style type="text/css">
p{
	font-weight:bold;
	}
</style>
Font-size

O tamanho da fonte é definido pela propriedade font-size.

Existem várias formas de definirmos o tamanho de uma fonte, como por exemplo pixels e percentagens. No próximo exemplo, irei utilizar a mais utilizada para isso que é o pixel.

Listagem 5: Font-size

<style type="text/css">
p{
	font-size:12px;
	}
</style>

Font

Usar font é uma abreviação que permite definir várias propriedades em uma só.

Veja a seguir quatro linhas de código usadas para definir propriedades de fonte para um parágrafo

:

Listagem 6: Font

<style type="text/css">
p {
		font-style: italic;
		font-weight: bold;
		font-size: 30px;
		font-family: arial, sans-serif;
	}
</style>

Também podemos abreviar e escrever da seguinte forma:

Listagem 7: Font abreviado

<style type="text/css">
p {
		font: italic bold 30px arial, sans-serif;
	}
</style>

Lembrando sempre que existe uma ordem para seguirmos na hora de abreviar, a ordem é: font-style | font-variant | font-weight | font-size | font-family

Um Abraço e até o próximo artigo

Ricardo Arrigoni - Desenvolvedor Front-end e Analista SEO

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ajude-nos a evoluir: você gostou do post?  (0)  (0)

(opcional) Onde podemos melhorar?

Confirmar voto
Compartilhe:
Ficou com alguma dúvida?