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

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.

(opcional) Você poderia nos ajudar a entender onde erramos?

Confirmar voto
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?