A propriedade CSS font

Postado por em

A propriedade CSS font

Autor: Maujor
Publicado em: 11/12/2003
Atualizado em: 01/08/2005

As fontes nos elementos HTML

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

As propriedades básicas para fontes e que abordaremos neste tutorial são as listadas abaixo:

  • color:...................cor da fonte
  • font-family:..........tipo de fonte
  • font-size:.............tamanho de fonte
  • font-style:............estilo de fonte
  • font-variant:.........fontes maiúsculas de menor altura
  • font-weight:.........quanto mais escura a fonte é (negrito)
  • font:....................maneira abreviada para todas as propriedades

Valores válidos para as propriedades da fonte

  • color:
    1. código hexadecimal: #FFFFFF
    2. código rgb: rgb(255,235,0)
    3. nome da cor: red, blue, green...etc
  • font-family:
    1. nome da família de fontes : define-se pelo nome da fonte,
      p. ex:"verdana", "helvetica", "arial", etc.
    2. nome da família genérica: define-se pelo nome genérico,
      p. ex:"serif", "sans-serif", "cursive", etc.
  • font-size:
    1. xx-small
    2. x-small
    3. small
    4. medium
    5. large
    6. x-large
    7. xx-large
    8. smaller
    9. larger
    10. length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
    11. %
  • font-style:
    1. normal: fonte normal na vertical
    2. italic: fonte inclinada
    3. oblique:fonte obliqua
  • font-variant:
    1. normal: fonte normal
    2. small-caps: transforma em maiúsculas de menor altura
  • font-weight:
    1. normal
    2. bold
    3. bolder
    4. lighter
    5. 100
    6. 200
    7. 300
    8. 400
    9. 500
    10. 600
    11. 700
    12. 800
    13. 900

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Como estudar e entender os exemplos

Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras.

A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais.

color ... A cor da fonte

<html>
<head>
<style type="text/css">
<!--
h1 {color: #FF0000;}
h2 {color: #00FF00;}
p {color: rgb(0,0,255);}
-->
</style>
</head>
<body>
<h1>Cabeçalho com letras vermelhas</h1>
<h2>Cabeçalho com letras verdes</h2>
<p>Parágrafo com letras azuis</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Cabeçalho com letras vermelhas

Cabeçalho com letras verdes

Parágrafo com letras azuis

font-family...O tipo de fonte 

<html>
<head>
<style type="text/css">
<!--
h2 {font-family: arial, helvetica, serif;}
p {font-family: sans-serif;}
-->
</style>
</head>
<body>
<h2>Família por nome: arial, helvetica, serif;</h2>
<p>Família genérica: sans-serif;<p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Família por nome: arial, helvetica, serif;

Família genérica: sans-serif;

Notas: A propriedade font-family é usada para definir uma lista de tipos de fontes.

O browser assume o primeiro nome que ele reconhece na lista.

Separar cada nome por uma vírgula e sempre prever um nome genérico.

Se o nome da fonte for composto (mais de uma palavra, p. ex: Comic Sans MS), usar aspas duplas no nome. Se estiver definindo um atributo de "style" em HTML, onde as aspas duplas já estão presentes usar no nome de fonte composto, aspas simples.

font-size...O tamanho de fonte 

<html>
<head>
<style type="text/css">
<!--
h1 {font-size: 14px;}
h2 {font-size: smaller;}
p {font-size: 100%;}
-->
</style>
</head>
<body>
<h1>Letras com tamanho: 14px</h1>
<h2>Letras com tamanho: smaller</h2>
<p>Letras com tamanho:100%</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Letras com tamanho: 14px

Letras com tamanho: smaller

Letras com tamanho:100%

font-style...O estilo de fonte 

<html>
<head>
<style type="text/css">
<!--
h1 {font-style: italic;}
h2 {font-style: normal;}
p {font-style: oblique;}
-->
</style>
</head>
<body>
<h1>Este é o estilo italic</h1>
<h2>Este é o estilo normal</h2>
<p>Este é o estilo oblique</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Este é o estilo italic

Este é o estilo normal

Este é o estilo oblique

font-variant...fontes maiúsculas "menores"

<html>
<head>
<style type="text/css">
<!--
h3 {font-variant: normal;}
p{font-variant: small-caps;}
-->
p</style>
</head>
<body>
<h3>Este cabeçalho com letras normais</h3>
<p>Este parágrafo com letras em "small-caps"</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Este cabeçalho com letras normais

Este parágrafo com letras em "small-caps"

font-weight...Peso das fontes - negrito (intensidade da cor)

<html>
<head>
<style type="text/css">
<!--
p {font-weight: bold;}
-->
</style>
</head>
<body>
<p>
Este é um parágrafo em negrito</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Este é um parágrafo em negrito

font...Todas as propriedades das fontes em uma declaração única

Esta é a maneira abreviada de você escrever uma regra para as propriedades das fontes.

A sintaxe geral é esta: font: [style] [variant] [weight] [size] [/line-height] [family] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Você pode declarar todas ou algumas das propriedades.

Os valores size e family são obrigatórios. Os demais são facultativos (se você os omitir será adotado o valor default ou herdado do elemento pai).

Os valores style, variant, weight e size, podem ser declarados em qualquer ordem.

<html>
<head>
<style type="text/css">
<!--
p {
font: italic small-caps bold 14px
 "Comic Sans MS", sans-serif;
}
-->
</style>
</head>
<body>
<p>Parágrafo em declaração única</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

parágrafo em declaração única

O valores caption, icon, menu, message-box, small-caption e status-bar referem-se às fontes usadas pelo sistema operacional do visitante do site e devem ser declarados isolados na propriedade font.

  • caption............fontes usadas em botões;
  • icon.................fontes usadas em ícones;
  • menu...............fontes usadas em menus;
  • message-box...fontes ussadas em caixas de mensagens;
  • small-caption...fontes usadas em pequenos controles;
  • status-bar........fontes usadas na barra de status;

O valor inherit é usado para herdar a fonte usada pelo elemento pai e também deve ser declarados isolados na propriedade font.

<html>
<head>
<style type="text/css">
<!--
.p1 {
font: status-bar;
}
.p2 {
font: inherit;
.p3 {
font: small-caption ;
}
}
-->
</style>
</head>
<body>
<p class="p1">Parágrafo com fonte status-bar</p>
<p class="p2">Parágrafo com fonte inherit</p>
<p class="p3">Parágrafo com fonte small-caption</p>
</body>
</html>

Este é o efeito da folha de estilo acima:

Parágrafo com fonte status-bar

Parágrafo com fonte inherit

Parágrafo com fonte small-caption

Você poder fazer uso de um excelente editor para a propriedade font e descobrir mais efeitos para complementar este tutorial, nesta página interativa.

Fonte

http://www.maujor.com/tutorial/fonttut.php

Comentários

Postar um comentário