DevMedia
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.

[fechar]

Você não gostou da qualidade deste conteúdo?

(opcional) Você poderia comentar o que não lhe agradou?

Confirmo meu voto negativo

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



Cursando Marketing na UniCarioca, desenvolvedor Front-end há mais de 4 anos, Analista de Marketing Digital na DevMedia e coordenador editorial do site MrBool.com. Portfolio: http://www.ricardoarrigoni.com.br

O que você achou deste post?
Conhece a assinatura MVP?
Publicidade
Serviços

Mais posts