Estilos de texto

Esta página dá mais exemplos de estilos de texto.

Você modifica sua folha de estilo de amostra para usar diferentes fontes.

Informação: Estilos de texto

CSS tem várias propriedades para estilos de texto.

Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, font, que você pode usar para especificar várias coisas de uma vez — por exemplo:

  • Negrito, itálico e letras minúsculas
  • O tamanho
  • A altura da linha
  • O tipo da fonte
Exemplo
p {font: italic 75%/125% "Comic Sans MS", cursive;}

Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.

O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).

O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).

A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo normal)

Tipos de fonte

Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.

Acabe a lista com um dos tipos de fontes internas padrão: serif, sans-serif, cursive, fantasy ou monospace. (Algumas destas podem ser configuradas nas Opções do seu navegador.)

Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.

Para especificar um tipo de fonte por conta própria, use a propriedade font-family.

Tamanho da fonte

Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.

Você pode usar alguns valores internos para o tamanho das fontes, como: small, medium e large. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: smaller, larger, 150% ou 1.5em.

Se necessário você pode especificar um tamanho atual, como: 12px (12 pixels) para um instrumento de exibição ou 12pt (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.

Para especificar um tamanho de fonte por conta própria, use a propriedade font-size.

Altura da linha

A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.

Para especificar a altura da linha por conta própria, use a propriedade line-height.

Decoração

A propriedade separada text-decoration pode especificar outros estilos, como underline ou line-through. Você pode configurar isto para none removendo explicitamente qualquer decoração.

Outras propriedades

Para especificar itálico por conta própria, use font-style: italic;
Para especificar negrito por conta própria, use font-weight: bold;
Para especificar letras minúsculas por conta própria, use font-variant: small-caps;

Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor normal ou inherit.

Mais detalhes
Você pode especificar os estilos do texto em uma variedade de outras maneiras.

Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.

Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita font, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).

Para maiores detalhes sobre as propriedades relacionadas às fontes, veja Fonts na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja Text.

Ação: Especificando fontes

Para um documento de amostra, você pode escolher a fonte do elemento BODY e o resto do documento herda as configurações.

Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:

body {font: 16px "Comic Sans MS", cursive;}

Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.

Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:

Cascading Style Sheets
Cascading Style Sheets

Da barra de menu do seu navegador, escolha Exibir – Tamanho do Texto – Aumentar. Mesmo que o estilo especificado seja 16 pixels, um usuário lendo o documento pode mudar o tamanho.

Desafio
Sem mudar mais nada, faça todas as seis letras iniciais duas vezes o tamanho na fonte serifada padrão do navegador:
Cascading Style Sheets
Cascading Style Sheets

O que vem depois?

Se você teve dificuldade para entender esta página, ou se você tem algum comentário sobre ela, por favor contribua nesta página de Discussão.

Seu documento de amostra está pronto para usar várias cores nomeadas. A próxima página lista os nomes das cores padrão e explica como você pode especificar outras: Cor

Etiquetas do documento e colaboradores

Etiquetas: 
Última atualização por: fscholz,