As propriedades da fonte CSS definem a família da fonte, a ousadia, o tamanho e o estilo de um texto.
Famílias de fontes CSS
No CSS, existem dois tipos de nomes de família de fontes:
família genérica – um grupo de famílias de fontes com aparência semelhante (como “Serif” ou “Monospace”)
família de fontes – uma família de fontes específica (como “Times New Roman” ou “Arial”)
Nota: Nas telas de computador, as fontes sem serifa são consideradas mais fáceis de ler do que as fontes com serifa.
Família de fontes
A família da fonte de um texto é definida com a font-familypropriedade
A font-familypropriedade deve conter vários nomes de fontes como um sistema de “fallback”. Se o navegador não suportar a primeira fonte, ele tenta a próxima fonte e assim por diante.
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 nenhuma outra fonte estiver disponível.
Nota : Se o nome de uma família de fontes tiver mais de uma palavra, ele deverá estar entre aspas, como: “Times New Roman”.
Mais de uma família de fontes é especificada em uma lista separada por vírgula:
.serif {
font-family: "Times New Roman", Times, serif;
}
.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Lucida Console", Courier, monospace;
}
<!DOCTYPE html>
<html>
<head>
<style>
.serif {
font-family: "Times New Roman", Times, serif;
}
.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
.monospace {
font-family: "Lucida Console", Courier, monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
<p class="monospace">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Exemplo
Especifique a fonte “Impact” para um parágrafo:
p.impact {
font-family: Impact, Charcoal, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
<style>
p.impact {
font-family: Impact, Charcoal, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="impact">This is a paragraph, shown with the Impact font.</p>
</body>
</html>
<< Anterior Texto CSS – Sombra de texto CSS
Deixe um comentário