Campus Online

Propriedades de Font

Propriedades de Font

Manipular fontes na internet sempre foi um assunto um tanto complicado. Você tem uma série de limitações que as vezes acabam deixando o desenvolvedor sem opções alternativas. Começando pelo fato de que não há um acervo de fontes interessantes para serem usados em trabalhos para internet. O único caminho é sempre usar as fontes surradas como Arial, Tahoma, Helvetica, Times New Roman, Trebuchet Ms, e... só.
Outro desafio é que nem todos os computadores tem essas fontes para que possamos usar. A maioria tem as fontes que citamos, mas nem todos, logo você não tem certeza absoluta de que seu site será bem visto em todos os computadores.

Pelo menos, com CSS podemos manipular algumas características destas fontes nos dando algumas liberdades extras. Podemos definir a família de fonte, tamanho de fonte, o estilo da fonte, sua variação, peso etc. A propriedade responsável por tudo isso é a propriedade FONT.

O browser segue alguns passos para fazer a formatação das fontes:

1. O browser monta (ou acessa) um banco de dados das propriedades mais relevantes de todas as fontes disponíveis a ele. Uma fonte pode estar disponível ao browser porque ela está instalada localmente. Se houverem duas fontes definidas com exatamente as mesmas propriedades, então uma delas será descartada.
2. Para um dado elemento, e para cada caracter definido neste elemento, o browser monta todas as propriedades aplicáveis para o elemento. Com base no conjunto completo de propriedades, o browser olha para o propriedade 'font-family' a fim de escolher uma família de fontes que possa ser usada. Com esta família já escolhida, todo o conjunto de propriedades é testado para ver se eles podem ser aplicados à mesma. Em caso positivo está determinada a fonte que será usada.
3. Se não ocorre o casamento de todas as propriedades, e ainda existem mais famílias de fontes disponíveis para uso, então o passo anterior é repetido para uma nova família.
4. Caso ocorra o casamento de todas as propriedades, mas o caracter necessário não esteja definido na família escolhida, e se ainda houver mais famílias disponíveis, então o passo 2 é repetido com a próxima família disponível.
5. Se nenhuma fonte for encontrada no processo descrito, então uma fonte 'default' do sistema, será empregada usando a melhor combinação de propriedades possível para montar o caracter.

As regras de ajuste das propriedades indicadas no item (2) são as seguintes:

1. Inicialmente é testada 'font-style'. O estilo itálico ('italic') será atendido caso exista uma fonte no banco de dados usado pelo browser que esteja designada pela palavra-chave 'italic' (de preferência) ou 'oblique'. Caso contrário todos os outros valores deverão coincidir de maneira exata, ou o estilo não funcionará.
2. A seguir é testada a propriedade 'font-variant'. Um valor 'normal' é aceito para uma fonte que não esteja especificada como 'small-caps'; 'small-caps' é aceito com (1) uma fonte especificada como 'small-caps', (2) uma fonte onde as letras maiúsculas de tamanho pequeno sejam geradas, ou (3) uma fonte onde todas as letras minúsculas foram substituídas por letras maiúsculas. Uma fonte 'small-caps' pode ser gerada eletronicamente redimensionando letras maiúsculas a partir de uma fonte normal.
3. A próxima propriedade a ser testada é 'font-weight', que nunca poderá falhar.
4. A seguir, deve ser atendida a propriedade 'font-size', dentro de uma margem de tolerância que depende de cada browser. Normalmente, o tamanho para as fontes escaláveis é arredondado para o pixel inteiro mais próximo, enquanto que a tolerância para as fontes não escaláveis (bitmap) pode chegar a 20%. Os cálculos posteriores, provocados pelos valores 'em' em outras propriedades, tomam como base o valor de 'font-size'.

(fonte: http://www.w3.org/TR/REC-CSS1#font-matching)

font-family

• Valor padrão: depende da cada browser
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: N/a

A propriedade font-family é responsável por definir as fontes que o texto aparecerá na tela. Você define uma série de nomes de fontes específiacas ou famílias de fontes. Esses nomes são separados por vírgula.
Existem 2 valores específicos que definem os nomes das famílias: Fonte específica ou Famílias de fontes.

Fonte específica

Você diz o nome de uma fonte específica como por exemplo: Arial, Tahoma, Verdana, etc.

Famílias de fonte

Você específica um nome de família genérica, como por exemplo: Serif (Times, Times New Roman, etc), Sans-Serif (Aria, Tahoma, Trebuchet Ms), Cursive (Zapf-Chancery), Fantasy (Western) ou Monospace (Courier, etc).

p {font-family: Arial, Tahoma, Verdana, Sans-Serif;}

É sempre recomendado que o desenvolvedor defina uma família genérica de fontes como última alternativa. Recomenda-se isso por quê pode ocorrer de o desenvolvedor escolher uma fonte sem serifa para o texto, como escolhemos no nosso exemplo acima, e o usuário não ter nenhuma fonte que definimos no CSS (no caso, Arial, Tahoma e Verdana), nesse caso, como está definido a família Sans-Serif, o browser irá buscar no computador do usuário a fonte padrão sem serifa e não a serifada. Assim o layout não fica totalmente diferente do original.

p {font-family: Times, "Times New Roman", Serif;}

Uma regra importante que devemos lembrar, é que se o nome da fonte for separado por espaços, ele deve ser colocado entre aspas. No caso acima, o nome Times New Roman contém espaços, portanto ele deve estar dentro de aspas.
Se as aspas forem omitidas, qualquer espaço anterior ou posterior ao nome da fonte será ignorado, e qualquer seqüência de espaços dentro do nome da fonte será convertido um único espaço em branco.

font-style

• Valores permitidos: italic, oblique e normal.
• Valor padrão: normal
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: N/a

A propriedade font-style define o estilo da fonte, ou seja, se ela será mostrada como itálico, obliqua (italico ao contrário) ou normal (muitas vezes conhecida como romana).
Se a fonte não suportar algum destes estilos, ela fica com o estilo normal.

p {
	font-family: Times, "Times New Roman", Serif;
	font-style: italic;
}

No exemplo acima, o texto será mostrado como itálico.

font-variant

• Valores permitidos: normal ou small-caps
• Valor padrão: normal
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: N/a

Esta propriedade é muito interessante. Ele faz com que as letras minúsculas pareçam letras maiúsculas.

p {
	font-family: Times, "Times New Roman", Serif;
	font-style: italic;
	font-variant: small-caps;
}

font-weight

• Valor padrão: normal
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: N/a
• font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

A propriedade 'font-weight' seleciona a intensidade de uma fonte. Na seqüência de valores de '100' a '900', cada número indica uma fonte mais intensa (escura) que o valor anterior. A palavra-chave 'normal' equivale à intensidade '400', enquanto que 'bold' é igual a '700'. Outras palavras-chaves para indicar as intensidades mostraram-se confusas, optando-se pela seqüência numérica.

p { font-weight: normal }   /* 400 */
h1 { font-weight: 700 }     /* bold */

Os valores representados por 'bolder' e 'lighter' são usados sempre como referência aos valores herdados do elemento pai:

strong { font-weight: bolder }

Elementos filhos herdam a intensidade, não a palavra-chave.
As fontes normalmente possuem uma ou mais propriedades cujos valores são nomes descritivos da sua intensidade. Não existe um padrão universalmente aceito para estes nomes. Seu uso inicial era distinguir fontes de diferentes tonalidades dentro de uma única família. Seu uso por outras famílias de fontes varia bastante; por exemplo, uma fonte que você imagina como sendo pesada (escura) pode ter sido descrita como Regular, Roman, Book, Medium, Semi- ou DemiBold, Bold, ou ainda Black, dependendo de quão escura é a fonte dita 'normal' pelo seu criador. Devido a esta falta de padronização, em CSS1 a intensidade é expressa por valores numéricos, onde o valor '400' indica a fonte 'normal' para aquela família.
Se a família da fonte já possui uma escala numérica com nove valores (tal como a OpenType), as intensidades podem ser indicadas diretamente.
Se existe uma fonte identificada como Medium e outra como Book, Regular, Roman ou Normal, então a Medium é associada à intensidade '500'.

A fonte classificada como Bold corresponde à intensidade '700'.
Se existem menos de nove valores de intensidade definidos para a família, deve ser usado o seguinte algoritmo para preencher as lacunas. Se '500' não estiver designado, ele será associado à mesma fonte de '400'. Se qualquer dos valores '600, '700', '800' ou '900' não estiverem designados, eles serão associados à próxima fonte mais escura disponível, se houver, ou à menos clara em caso contrário. Se quaisquer dos valores '300', '200' ou '100' estiverem ausentes, eles serão associados à próxima fonte mais clara disponível, se houver, ou à menos escura em caso contrário.
Os dois exemplos seguintes mostram este processo. Foram assumidas quatro intensidades na família do exemplo 1: Regular, Medium, Bold, Heavy (do mais claro ao mais escuro). Já no exemplo 2 foram assumidas seis intensidades: Book, Medium, Bold, Heavy, Black, ExtraBlack.

Desde que a intenção das palavras 'bolder' e 'lighter' é escurecer ou clarear a fonte dentro de sua família, e como a família pode não possuir associações para todos os valores simbólicos, o ajuste do valor de 'bolder' é feito levando a fonte para o próximo valor mais escuro disponível, e 'lighter' para o mais claro. Para ser mais preciso, o significado destas palavras é:
'bolder' seleciona a próxima intensidade mais escura que o valor herdado. Se tal intensidade não existe, caso do valor herdado ser '900', este valor é mantido.
'lighter' é similar, atuando no sentido oposto.
Não há garantia de que sempre haverá uma fonte mais escura (ou mais clara) do que a especificada. Por exemplo, algumas famílias de fontes possuem definidos apenas os valores 'normal' e 'bold', enquanto que outras possuem oito valores diferentes. A única garantia é que a fonte de um dado valor será no mínimo mais escura que a que possui um valor menor, dentro da mesma família.

font-size

• font-size: absolute-size | relative-size | length | percentage
• Valor padrão: medium
• Aplicável a: todos os elementos
• Propriedade herdada: sim
• Valores percentuais: relativo ao tamanho da fonte no elemento pai

A indicação "absolute-size" é apenas um índice de para uma tabela de tamanhos calculada pelo browser. Os valores são escritos por extenso: xx-small, x-small, small, medium, large, x-large, xx-large. A medida em tamanhos se refere mais ou menos assim: quando a fonte é definida como medium, ela equivale a mais ou menos 10pt, logo, quando é definida um valor large, fica aproximadamente a 15pt. Mas isso pode variar de browser para browser dependendo da qualidade de disponibilidade das fontes requisitadas.

p {
	font-size: small;
}

A palavra-chave relative-size é interpretada como um tamanho relativo ao usado na tabela de tamanhos do elemento pai. Os valores permitidos são: [ larger | smaller ]. Exemplo: se o elemento pai possui um tamanho de fonte 'medium', um valor 'large' será adotado quando esta propriedade for ajustada para 'large'. Se o valor do elemento pai não estiver definido na tabela, o browser tem liberdade para fazer interpolação entre os valores existentes.

p {
	font-size: smaller;
}

Você também pode usar como referência unidades de tamanho como pt, px ou %. Normalmente usamos PX ou %. Muitas pessoas preferem usar % como padrão pelo simples fato chamado Internet Explorer. Os browsers, incluindo o IE, tem uma opção de aumentar a fonte da página. No Internet Explorer esta opção se localiza em Exibir > Tamanho do Texto. Esta opção não funciona se o site estiver com a fonte definida em PX. Logo, se um usuário precisa aumentar a fonte ele não conseguirá se a fonte estiver definida em Pixels. Em contrapartida ele consegue aumentar a fonte se for definida em %. Os outros browsers funcionam perfeitamente com qualquer uma das unidades.

Resumindo a propriedade

Você pode usar todas essas propriedades de um modo resumido em uma linha. Seria um pouco ruim se você tivesse em seu CSS um código mais ou menos assim:

p {
	font-size: smaller;
	font-family: Times, "Times New Roman", Serif;
	font-style: italic;
	font-variant: small-caps;
}

Por isso, você pode usar o jeito resumido, segue abaixo:

p {
	font:italic small-caps 12px Times, "Times New Roman", Serif;