Home
índice (CSS)
Página anterior

Estilização de Fontes

Existem dois tipos de fontes:

Fontes seguras e Fontes genéricas.
Cada Sistema Operacional, vem com um conjunto de fontes pré instaladas. Esse conjunto de fontes mais usadas denomina-se fontes seguras. Isso pelo fato de que em quase todos os Sistemas Operacionais encontram-se essas fontes. Na prática, isso assegura que a maioria dos usuários visualizem o site do jeito que foi projetado. A não ser que o usuário, delete uma dessas fontes do Sistema Operacional dele. São elas:

• Arial
• Arial Black
• Comic Sans Ms
• Courier New
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Na folha de estilo ficaria assim:
p{
/*fonte-family - para declarar uma família de fontes*/
font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
}
Ou seja a regra diz para o navegador: use primeiro a lucinda grande, se não encontrar use a lucinda sans, se não encontrar nenhuma das duas use a verdana, se não encontrar tente a genérica. A última opção é a fonte genérica. Ela faz parte de um conjunto de fontes genéricas, definidas pela w3c. Fontes
São elas:

• Serif
• Sans-Serif
• Cursive
• Fantasy
• Monospace

Formas de declarar as fontes:

Na folha de estilo ficaria assim:
p{
font-family: "lucinda grande", "lucinda sans", verdana, sans-serif;
font-style:italic; /*pode-se escolher entre oblique, normal, inherit*/
font-weight: bold; /*define a tonalidade da fonte baseado em um parâmetro chamado peso e varia de 100 a 900*/
/*font-weight: lighter; deixa a letra afinada.*/
font-variant: small-caps; /*trasforma em maiúsculas, um pouco menores do que as originais*/
font-size: 6px;/*tamanho em pixels*/
font-size: 1em;/*em (medida relativa)*/
/*Pode-se abreviar a declaração:*/
font:italic small-caps bold 10px/150% verdana sans-serif;
/Observação: esta declaração é composta pelo font-style font-variant font-family line-height }

Espaçamento e Alinhamento de Textos

Propriedades das Fontes

• Letter-spacing

Essa propriedade controla o espaçamento entre as letras de um texto. Na folha de estilo ficaria assim:
p{
letter-spacing:5px;
}

• Word-spacing

Essa propriedade controla o espaçamento entre as palavras.

Na folha de estilo ficaria assim:
p{
word-spacing:5px;
/*espaçamento entre as palavras*/
}

• Line-height

p{

Essa propriedade controla o espaçamento entre as linhas do texto
line-height:30px;/*espaçamento entre as linhas do texto*/
line-height: 2; /*colocando um número simples, o espaçamento será feito com o tamanho da fonte, vezes esse número*/
}

• Vertical-line

A propriedade vertical-line controla o posicionamento vertical dos boxs in line. Na folha de estilo ficaria assim:
span {
vertical-align:sub;
/*pode-se usar sup também, nesse caso ficaria acima*/
}
Marca-se no texto com <span>e as palavras ficam abaixo da linha normal. Na folha de estilo ficaria assim:
span{
vertical-align:sub;
}

• Text-decoration

Esta é mais uma propriedade de estilização e permite que um texto possa ser:
sublinhado, linha abaixo.
superlinhado, linha acima.
cortado ao meio, line-through.
piscando, blink.
Na folha de estilo ficaria assim:
p{
text-decoration: overline; /*linha acima do texto*/ text-decoration: underline; /*linha abaixo do texto*/ text-decoration: line-through; /*linha cortando o texto*/ text-decoration: blink; /*o texto fica piscando*/
}

• Text-transform

Esta propriedade permite que um texto possa ter as letras modificadas da seguinte forma:
p{
text-transform:capitalize; /*a primeira letra do parágrafo em tamanho maior*/
text-transform: uppercase; /*todas as letra em maiúsculas*/
text-transform: lowercase; /*todas as letra em minúsculas*/
}