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
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 |
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.
| 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 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.
Sem mudar mais nada, faça todas as seis letras iniciais duas vezes o tamanho na fonte serifada padrão do navegador:
|
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