O CSS disponibiliza numerosas propriedades para a personalização da aparência do texto. Essas vão desde a fonte até sombras.
Entre as propriedades de texto do CSS, estão a definição da fonte, estilo e peso da fonte. Essas propriedades são principalmente úteis para elementos HTML que contenham texto (p, i, etc.). No entanto, também podem ser usadas em tabelas.
A propriedade font-family define a fonte a ser utilizada.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
p {font-family:verdana, sans-serif;}
h1 { font-family:"Courier New", Courier, monospace; }
</style>
</head>
<body>
<div>
<h1>PSD-Tutorials.de</h1>
<p>Das ist ein Absatz mit einem <strong>fetten Wort</strong>.</p>
<h2>Das ist eine Überschrift mit einem <strong>fetten Wort</strong>.</h2>
</div>
</body>
</html>O resultado no navegador ficaria assim:
Fontes comuns são, por exemplo, Arial, Helvetica e Times Roman. A propriedade CSS font-family atribui as fontes desejadas. Se várias fontes são especificadas, a ordem é importante. Se a primeira fonte especificada estiver disponível, ela será usada. As fontes desejadas devem ser separadas por vírgulas. Por fim, costuma-se fornecer uma família genérica de fontes. Ao especificar uma família genérica de fontes, os navegadores têm a opção de escolher uma fonte similar à especificada.
• serif = uma fonte com serifa
• sans-serif = uma fonte sem serifa
• cursive = uma fonte cursiva
• fantasy = uma fonte fantasia
• monospace = uma fonte com espaçamento fixo.
O Estilo da Fonte
A propriedade font-style permite definir o estilo da fonte. Se a fonte escolhida permitir, é possível forçar um estilo inclinado com o valor italic.
Outras fontes podem ser inclinadas com oblique.
A próxima propriedade CSS que influencia a aparência do texto é chamada de font-variant. Ela permite definir versais.
Para isso, atribui-se a font-variant o valor small-caps.
Tamanho da Fonte
É muito importante especificar o tamanho da fonte. O CSS disponibiliza a propriedade font-size para isso. Os tamanhos de fonte podem ser especificados em diversas unidades diferentes.
• EM
• REM
• Pixel
• Porcentagem
• Palavras-chave
As palavras-chave disponíveis são as seguintes:
• xx-small – muito, muito pequena
• x-small – muito pequena
• small – pequena
• smaller – menor que o elemento pai
• medium – média
• large – grande
• x-large – muito grande
• xx-large – muito, muito grande
• larger – maior que o elemento pai
Aqui está um exemplo de como definir o tamanho da fonte:
.eins {font-size: 10px;}
.zwei {font-size: 20px;}
.drei {font-size: 110%;}
.vier {font-size: xx-large;}E assim fica no navegador:
Observe que a definição de tamanho de fonte é um tema complexo, pois diferentes unidades têm vantagens e desvantagens. Para mais informações sobre quando usar cada unidade, consulte http://www.soeren-hentzschel.at/technik/programmierung/2011/01/16/px-pt-em-welches-ist-das-richtige-mas-fur-schrift/. Para quem não deseja ler, use unidades relativas como em para exibição na tela. Para layouts de impressão, prefira unidades absolutas como pt.
O Peso da Fonte
Seguimos com o chamado peso da fonte. Com essa propriedade, determina-se a espessura da fonte. A propriedade utilizada é font-weight.
.fett {
font-weight:bold;
}
Essa sintaxe faz com que o texto marcado seja exibido em negrito.
Os valores possíveis são bold (negrito), bolder (mais negrito), lighter (mais leve) e normal. Além disso, são permitidos valores numéricos de 100, 200, 300, 400, 500, 600, 700, 800 e 900. Esses vão de extra fino (100) a muito negrito (900).
Resumindo definições
No contexto das definições de fonte, a propriedade line-height também desempenha um papel importante, permitindo definir a altura da linha. Falarei mais detalhadamente sobre essa propriedade mais tarde. Neste ponto, ela precisa ser mencionada apenas, pois desempenha um papel no contexto da propriedade font mostrada posteriormente.
Vocês podem combinar as informações apresentadas até agora sobre a exibição da fonte. Para isso, é utilizada a propriedade font geral, que inclui as seguintes informações individuais ou as considera.
• font-style
• font-variant
• font-weight
• font-size
• line-height
• font-family
Através de font é possível combinar várias formatações de fonte. Vocês podem especificar as propriedades mencionadas anteriormente, mas não é obrigatório usar todas. Porém, as propriedades de tamanho de letra e família de fontes são obrigatórias.
Graças à forma abreviada, é possível manter os arquivos CSS mais curtos e organizados.
No entanto, a ordem mostrada a seguir deve ser seguida. Se as duas propriedades font-size e line-height forem indicadas, elas devem ser separadas por uma barra. Se apenas um valor for indicado, ele será para font-size.
Um exemplo:
p {
font: italic small-caps bold 1.3em/1.5em Georgia,Times,serif;
}font-size-adjust foi desenvolvido para permitir a exibição de fontes quase do mesmo tamanho. Fontes diferentes apresentam diferentes alturas x mesmo com a mesma altura de letra. No entanto, fontes com uma altura x maior são mais legíveis. Assim, pode ocorrer que um documento seja de difícil leitura se a fonte original não estiver disponível e for substituída por outra com uma altura x menor. Com font-size-adjust, espera-se que essa diferença possa ser equilibrada.
Um exemplo:
h1 {
font-family: Verdana,
'Times New Roman', 'Courier New';
font-size-adjust: 0.61;
}
No próximo tutorial, vocês aprenderão mais maneiras de adaptar a aparência da fonte do seu site.
