Fontes CSS
Escolher a fonte certa para o seu site é importante!
A seleção da fonte é importante
Escolher a fonte certa tem um enorme impacto em como os leitores experimentam um site.
A fonte certa pode criar uma identidade forte para sua marca.
Usar uma fonte que seja fácil de ler é importante. A fonte agrega valor ao seu texto. Também é importante escolher a cor e o tamanho do texto corretos para a fonte.
Famílias de fontes genéricas
Em CSS existem cinco famílias de fontes genéricas:
- As fontes com serifa têm um pequeno traço nas bordas de cada letra. Eles criam uma sensação de formalidade e elegância.
- As fontes sem serifa têm linhas limpas (sem pequenos traços anexados). Eles criam um visual moderno e minimalista.
- Fontes monoespaçadas - aqui todas as letras têm a mesma largura fixa. Eles criam uma aparência mecânica.
- As fontes cursivas imitam a caligrafia humana.
- Fontes de fantasia são fontes decorativas/lúdicas.
Todos os nomes de fontes diferentes pertencem a uma das famílias de fontes genéricas.
Diferença entre fontes com serifa e sem serifa
Observação: em telas de computador, fontes sem serifa são consideradas mais fáceis de ler do que fontes com serifa.
Alguns exemplos de fontes
| Generic Font Family | Examples of Font Names |
|---|---|
| Serif | Times New Roman Georgia Garamond |
| Sans-serif | Arial Verdana Helvetica |
| Monospace | Courier New Lucida Console Monaco |
| Cursive | Brush Script MT Lucida Handwriting |
| Fantasy | Copperplate Papyrus |
A propriedade da família de fontes CSS
Em CSS, usamos a font-familypropriedade para especificar a fonte de um texto.
Nota : Se o nome da fonte for mais de uma palavra, deve estar entre aspas, como: "Times New Roman".
Dica: A font-familypropriedade deve conter vários nomes de fontes como um sistema "fallback", para garantir a máxima compatibilidade entre navegadores/sistemas operacionais. Comece com a fonte desejada e termine com uma família genérica (para permitir que o navegador escolha uma fonte semelhante na família genérica, se não houver outras fontes disponíveis). Os nomes das fontes devem ser separados por vírgula. Leia mais sobre fontes de fallback no próximo capítulo .
Exemplo
Especifique algumas fontes diferentes para três parágrafos:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}