Fonts

As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML.

color

Define a cor de um texto. Alguns valores válidos para esta propriedade são:

• código hexadecimal: #FFFFFF

• código rgb: rgb(255,235,0)

• nome da cor: red, blue, green, etc

h1 {
    color: #FF0000;
}

font-family

Define a família da fonte de um texto. Em CSS, existem dois tipos de nomes de família da fonte:

• genérica: um grupo de famílias de fontes com um olhar similar (como "Serif" ou "Monospace");

• família da fonte: uma família de fontes específicas (como "Times New Roman" ou "Arial").

Deve conter vários nomes de fontes como um sistema de "fallback". Se o navegador não suporta a primeira fonte, ele tenta a próxima fonte. Comece com a fonte que você quer, e acabe com uma família genérica, para deixar o navegador escolher uma fonte semelhante na família genérica, se não houver outras fontes estão disponíveis.

Obs.: Se o nome de uma família de fonte tem mais do que uma palavra, ele deve estar entre aspas, como: "Times New Roman".

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

font-size

Define o tamanho de um texto. Alguns valores que podem ser utilizados para esta propriedade são:

• pixels (px);

• em (1 em é igual ao tamanho da fonte do elemento onde essa unidade for utilizada. ).

h1 {
    font-size: 40px;
}

 h2 {
    font-size: 2.5em;
}

Obs.: por questões de compatibilidade a W3C recomenda utilizar o tamanho da fonte sempre utilizando o valor com em. A conversão de pixels para em segue a seguinte fórmula:

• em = pixels/16

Pode-se utilizar também valores pré-definidos:

• medium (padrão);

• xx-small;

• x-small;

• small;

• large;

• x-large;

• xx-large;

• smaller;

• larger.

Neste link pode-se observar uma demonstração de utilização destes valores de fontes.

font-style

Define o estilo de fonte. Mais utilizado para colocar a fonte em itálico. Os valores utilizados para esta propriedade são:

• normal: padrão;

• italic: mostra o texto em itálico);

• oblique: inclina o texto (bem similar ao itálico).

p{
    font-style: italic;
}

font-variant

Define fontes maiúsculas de menor altura. Esta propriedade pode assumir os seguintes valores:

• normal: padrão;

• small-caps: transforma em maiúsculas de menor altura. *

p{
    font-variant: small-caps;
}

font-weight

Define a “intensidade” da fonte (negrito). Esta propriedade pode assumir os seguintes valores:

• normal: padrão;

• bold: negrito;

• bolder: aumenta "intensidade" do negrito;

• lighter: fonte mais fina;

• específicar intensidade: 100 a 900;

p {
    font-weight: bold;
}

Forma abreviada de se utilizar as propriedades de font

Esta é a maneira abreviada de você escrever uma regra para as propriedades das fontes. Ao usar a propriedade abreviada a ordem dos valores é:

1. font-style

2. font-variant

3. font-weight

4. font-size

5. font-family

Exemplo:

p {
   italic small-caps bold 14px "Comic Sans MS", sans-serif;
}