Código:


   h1 {font-family: arial, verdana, sans-serif;}
   h2 {font-family: "Times New Roman", serif;}

serão renderizados com fonte "Arial". Se o usuário não tiver a font Arial instalada, será usada a fonte "Verdana". Se ambas estiverem indisponíveis na máquina do usuário será usada uma fonte da família sans-serif.

Notar que para especificar a fonte "Times New Roman" foram usadas aspas. Isto é necessário para fontes com nomes compostos e que contenham espaços entre os nomes.

Estilo da fonte [font-style]

A propriedade font-style define a escolha da fonte em normal, italic ou oblique. No exemplo a seguir todos as cabeçalhos

serão em itálico.

Código:

h1 {font-family: arial, verdana, sans-serif;}
   h2 {font-family: "Times New Roman", serif; font-style: italic;}

Exemplo

Fonte variante [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. Confundiu? Dê uma olhada nos exemplos a seguir:



Se a propriedade font-variant for definida para small-caps e não estiver disponível na máquina do usuário, será usada fonte em maiúscula.

Código:


   h1 {font-variant: small-caps;}
   h2 {font-variant: normal;}

Exemplo

Peso da fonte [font-weight]

A propriedade font-weight define quão negrito ou "pesada" deve ser renderizada 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.

Código:

p {font-family: arial, verdana, sans-serif;}
   td {font-family: arial, verdana, sans-serif; font-weight: bold;}

Exemplo

Tamanho da fonte [font-size]

On tamanho da fonte é definido pela propriedade font-size.

Existem muitas unidades (p. ex.:. pixels e percentagens) que podem ser usadas para definir o tamanho da fonte. Neste tutorial nós usaremos as unidades mais comuns e apropriadas. Ver exemplos a seguir:

Código:


   h1 {font-size: 30px;}
   h2 {font-size: 12pt;}
   h3 {font-size: 120%;}
   p {font-size: 1em;}

Exemplo

Existe uma diferença fundamental entre as quatro unidades adotadas no exemplo acima. As unidades 'px' e 'pt' são absolutas, enquanto '%' e 'em' permitem ao usuário ajustar o tamanho das fontes ao seu gosto e necessidade. Muitos usuários têm restrições, como por exemplo, pessoas idosas, pessoas com visão limitada ou as que usam um monitor de baixa qualidade. Para fazer seu site acessível a todos, você deverá usar unidades como '%' ou 'em'.

Abaixo uma figura mostrando como ajustar o tamanho das fontes nos navegadores Mozilla Firefox e Internet Explorer. Tente você mesmo este ajuste — uma excelente funcionalidade do navegador, não é mesmo?



Compilando [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

:

Código:

p {
      font-style: italic;
      font-weight: bold;
      font-size: 30px;
      font-family: arial, sans-serif;
   }
   

Usar a abreviação simplifica o código como mostrado abaixo:

Código:

p {
      font: italic bold 30px arial, sans-serif;
   }

ordem dos valores para font é a mostrada a seguir :

font-style | font-variant | font-weight | font-size | font-family

Fonte: " target="_blank" rel="nofollow">http://pt-br.html.net/tutorials/css/lesson4.php#s1">