Fontes CSS

Índice

    Mostrar índice

Escolher a fonte certa para o seu site é importante!

A seleção da fonte é importante

A escolha da fonte certa tem um enorme impacto na forma como os leitores experimentam um local na rede Internet.

A fonte certa pode criar uma identidade forte para sua marca.

Usar uma fonte fácil de ler é importante. A fonte adiciona 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:

  1. As fontes Serif têm um pequeno traço nas bordas de cada letra. Eles criam uma sensação de formalidade e elegância.

  2. As fontes Sans-serif têm linhas limpas (sem pequenos traços anexados). Eles criam um visual moderno e minimalista.

  3. Fontes monoespaçadas - aqui todas as letras têm a mesma largura fixa. Eles criam uma aparência mecânica.

  4. As fontes cursivas imitam a caligrafia humana.

  5. As fontes Fantasy são decorativas/divertidas.

Todos os diferentes nomes de fontes pertencem a uma das famílias de fontes genéricas.

Diferença entre fontes serif e sans-serif

Observação: nas telas de computador, as fontes sem serifa são consideradas mais fáceis de ler do que as 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 propriedade font-family para especificar a fonte de um texto.

Nota: Se o nome da fonte tiver mais de uma palavra, deverá estar entre aspas, como: "Times New Roman".

Dica: A propriedade font-family deve conter vários nomes de fontes como um sistema "substituto", para garantir a máxima compatibilidade entre navegadores/sistemas operacionais. Comece com a fonte desejada e termine com uma família genérica (para deixar o navegador escolha uma fonte semelhante na família genérica, se nenhuma outra fonte for disponível). Os nomes das fontes devem ser separados por vírgula. Leia mais sobre fontes substitutas 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;
}

Experimente você mesmo →

<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>

<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>

</body>
</html>