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
