Família da Fonte

Parte da seção Styling with CSS do Journey de HTML da Coddy — lição 18 de 76.

No CSS, a propriedade font-family é usada para especificar a tipografia para o texto dentro de um elemento HTML. Esta propriedade permite listar as fontes preferidas para o seu texto. Se a primeira fonte não estiver disponível, o navegador usará a próxima da lista, garantindo uma aparência semelhante.

Aqui está a sintaxe básica para usar a propriedade font-family:

selector {
    font-family: font1, font2, generic-family;
}

font1, font2: Os nomes das famílias de fontes preferidas, listados em ordem de preferência. Se font1 não estiver disponível, o navegador tentará font2, e assim por diante.

generic-family: Um nome de família de fontes genérica, como serif, sans-serif, monospace, cursive ou fantasy. Isso serve como uma alternativa (fallback) se nenhuma das fontes especificadas estiver disponível.

Ao especificar nomes de famílias de fontes, é importante seguir estas diretrizes:

Se o nome de uma família de fontes contiver espaços em branco, ele deve ser colocado entre aspas (ex: "Times New Roman", "Courier New").

Múltiplos nomes de famílias de fontes devem ser separados por vírgulas.

É uma boa prática incluir uma família de fontes genérica como a última opção na lista para garantir que um fallback adequado seja usado se nenhuma das fontes especificadas estiver disponível.

Por exemplo:

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

Desafio

Fácil

Você recebeu um documento HTML com um título (<h1>) e um parágrafo (<p>). Sua tarefa é usar a propriedade font-family para estilizar esses elementos. Siga os passos abaixo:

Escreva uma regra CSS que tenha como alvo o elemento <h1>. Defina o font-family como "Times New Roman", Times, serif.
Escreva uma regra CSS que tenha como alvo o elemento <p>. Defina o font-family como Arial, Helvetica, sans-serif.

Folha de consulta

A propriedade font-family especifica a tipografia para o texto. Liste as fontes preferidas em ordem - se a primeira não estiver disponível, o navegador usará a próxima.

Sintaxe básica:

selector {
    font-family: font1, font2, generic-family;
}

Diretrizes:

Nomes de fontes com espaços precisam de aspas: "Times New Roman"
Separe múltiplas fontes com vírgulas
Inclua uma família genérica (serif, sans-serif, monospace, cursive, fantasy) como alternativa (fallback)

Exemplo:

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

Experimente você mesmo

<html>
<head>
    <title>Font Family</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>