Propriedades de Estilo de Fonte em CSS

font-size: Tamanho da Fonte

A propriedade font-size é utilizada para definir o tamanho da fonte. Os valores dessa propriedade podem ser expressos em unidades de medida relativas ou absolutas. As unidades relativas são mais frequentemente utilizadas, sendo recomendada a utilização de pixels (px). As unidades absolutas são utilizadas com menor frequência. Os detalhes são os seguintes:

font-family: Família da Fonte

A propriedade font-family serve para definir a família da fonte a ser utilizada. As fontes mais comuns em páginas web incluem Songti, Microsoft YaHei, Heiti, entre outras. Por exemplo, para configurar todas as fontes dos parágrafos de uma página para Microsoft YaHei, pode-se utilizar o seguinte código CSS:

p { font-family: "Microsoft YaHei"; }

É possível especificar múltiplas fontes simultaneamente, separadas por vírgulas. Nesse caso, se o navegador não suportar a primeira fonte, ele tentará a próxima, e assim sucessivamente até encontrar uma fonte adequada.

1. O padrão atual nas páginas web é utilizar 14px ou mais.
2. Recomenda-se utilizar números pares para os tamanhos. Navegadores antigos como o IE6 podem apresentar problemas com números ímpares.
3. As diferentes fontes devem ser separadas por vírgulas em inglês.
4. Fontes chinesas devem ser escritas entre aspas em inglês, enquanto fontes em inglês geralmente não precisam de aspas. Ao definir fontes em inglês, estas devem ser listadas antes das fontes chinesas.
5. Se o nome da fonte conter espaços, símbolos como # ou $, a fonte deve ser escrita entre aspas simples ou duplas, por exemplo: font-family: "Times New Roman".
6. Preferir fontes padrão do sistema para garantir que sejam exibidas corretamente em qualquer navegador do usuário.

Fontes Unicode em CSS

No CSS, é possível escrever o nome da fonte diretamente em chinês. No entanto, quando a codificação do arquivo (GB2312, UTF-8, entre outras) não corresponder, podem ocorrer erros de caracteres incorretos. Além disso, sistemas mais antigos como o Windows XP não suportam certas fontes chinesas como Microsoft YaHei.

Solução 1: Utilizar o nome em inglês da fonte. Por exemplo: font-family: "Microsoft YaHei".

Solução 2: Escrever o nome da fonte utilizando Unicode diretamente no CSS para evitar esses problemas. Os navegadores conseguem interpretar corretamente fontes escritas em Unicode.

Exemplo: font-family: "\5FAE\8F6F\96C5\9ED1" define a fonte como "Microsfot YaHei".

Pode-se utilizar a função escape() para descobrir o código Unicode de determinada fonte.

Para minimizar problemas de compatibilidade entre diferentes computadores, recomenda-se utilizar apenas as fontes Songti e Microsoft YaHei.

font-weight: Espessura da Fonte

Além de utilizar as etiquetas HTML como <b> e <strong> para aplicar negrito, é possível obter o mesmo efeito através do CSS. Contudo, o CSS não possui significado semântico.

A propriedade font-weight define a espessura da fonte. Seus valores possíveis são: normal, bold, bolder, lighter e valores numéricos de 100 a 900 (múltiplos de 100).

Dica prática: O valor numérico 400 é equivalente a normal, enquanto 700 equivale a bold. A preferência é utilizar os valores numéricos.

font-style: Estilo da Fonte

Além de utilizar as etiquetas HTML como <i> e <em> para aplicar itálico, é possível obter o mesmo efeito através do CSS. Contudo, o CSS não possui significado semântico.

A propriedade font-style define o estilo da fonte, como itálico, oblíquo ou normal. Os valores possíveis são:

• normal: Valor padrão. O navegador exibe a fonte no estilo padrão.
• italic: O navegador exibe a fonte em itálico.
• oblique: O navegador exibe a fonte em estilo oblíquo.

Dica prática: Raramente aplica-se itálico ao texto. Em vez disso, é comum converter as etiquetas de itálico (<em>, <i>) de volta para o modo normal.

font: Configuração Completa de Fonte (Importante)

A propriedade font é utilizada para definir de forma agrupada todos os estilos da fonte. Sua sintaxe básica é:

seletor { font: font-style font-weight font-size/line-height font-family; }

Ao utilizar a propreidade font, deve-se seguir a ordem apresentada na sintaxe, sem alterar a sequência. As propriedades devem ser separadas por espaços.

Atenção: Propriedades não necessárias podem ser omitidas (assumindo seus valores padrão), porém é obrigatório manter pelo menos font-size e font-family. Caso contrário, a propriedade font não funcionará corretamente.