CSS: Fontes

Então pessoal, mais um tutorial CSS e hoje falaremos de Fontes. Hoje aprenderemos a modificar a aparência do texto. Vamos logo para o primeiro comando:

1. Família de Fontes
Se você já utilizou qualquer editor de texto decente, deve ter visto que cada fonte tem um nome. Isso é um nome de uma família de fonte e é esse nome que utilizamos como valores. Vamos mostrar um exemplo:


font-family:"Times New Roman";

Aqui estamos declarando que queremos uma fonte chamada "Times New Roman", que é um nome específico. Entretanto, uma fonte só pode ser usada se já existir no computador do usuário, e suponhamos que não exista essa fonte. O que fará? Eu posso especificar uma segunda fonte para ser usada inserindo uma vírgula e o nome da fonte reserva:

font-family:"Times New Roman", Georgia;

Ok, especificamos a nova fonte, mas e se essa fonte falhar como a primeira? Vou ter que especificar uma por uma, até todas as fontes acabarem? Isso seria impossível, por isso o CSS disponibiliza as famílias genéricas, que são:

• serif : Famílias de fontes com serifas. Exemplo: Times New Roman, Georgia;
• sans-serif: Familias de fontes sem serifas. Exemplo: Arial, Verdana;
• monospace: Famílias de fontes em que todos os caracteres tem a mesma largura. Exemplo: Courier New, Lucida Console;

Então, para dar um ponto final no nosso problema, dizemos que queremos qualquer fonte que seja da família genérica que queremos. Neste caso, vamos pegar uma fonte que seja serifadas.

font-family:"Times New Roman", Georgia, serif;

Exemplo:

p{
 font-family:"Times New Roman", Georgia, serif;
}

2. Itálico
Aqui é onde nós aplicamos os efeitos para itálico. Existe três opções para ser colocada na configuração:

• normal: A fonte normal, sem efeito nenhum;
• italic: Fonte em itálico;
• oblique: fonte em oblíquo (semelhante ao itálico, mas basicamente não vejo nenhuma diferença);

Exemplo:

p{
 font-family:"Times New Roman", Georgia, serif;
 font-style: italic;
}

3. Tamanho de Fonte
 Agora vamos falar sobre o tamanho. O tamanho da fonte pode ser usado em qualquer sistema de medidas utilizada pelo CSS. Entretanto, é importante falar sobre os efeitos de utilizar as medidas relativas (%, em, ex) e utilizar as medidas absolutas (in, cm, mm, pt, px):
Quando utiliza medidas absolutas, independente se o usuário quer aumentar ou diminuir o tamanho da fonte, não é possível modificá-las. Enquanto isso, utilizando as relativas, o usuário pode alterar a vontade o tamanho da fonte, que ela se adaptará ao novo tamanho.
Dado esses conhecimento, vamos ver um exemplo:

p{
 font-family:"Times New Roman", Georgia, serif;
 font-style: italic;
 font-size: 2em;
}

4. Negrito
Por fim, vamos falar sobre o negrito. Para definir o negrito, podemos utilizar números inteiros. Entretanto, também existe quatro palavras chaves, que equivalem algum número. Essas palavras são:

• normal: É o padrão, e o texto não é alterado. O número equivalente é 400, sendo que números menores torna a fonte mais fraco, enquanto números maiores torna a fonte mais fortes.
• bold: O negrito padrão. O número equivalente é o 700;
• bolder: Um negrito mais forte;
• lighter: Torna a fonte mais leve.

Exemplo para tornar negrito:

p{
 font-family:"Times New Roman", Georgia, serif;
 font-style: italic;
 font-size: 2em;
 font-weight: bold;
}

5. Conclusão
Então pessoal, hoje vimos como alterar a fonte da página usando CSS, mudando a família, e modificando para ficar itálico e negrito e também alterando o tamanho dele.