A font-familypropriedade define a fonte que é aplicada ao elemento selecionado. A fonte selecionada não é uma única face de fonte, mas uma “família” e, portanto, pode depender de outros valores de propriedade tipográfica para selecionar a face correta dentro da família.
body ( font-family: Arial, Helvetica, sans-serif; )Um valor pode ser um dos seguintes:
- Um nome de família de fontes que corresponde a uma fonte incorporada à página ou disponível no sistema do usuário.
- Uma série de sobrenomes separados por vírgulas, que podem incluir um sobrenome genérico
Se vários nomes de família forem usados, o navegador selecionará o primeiro que encontrar incorporado na página usando @font-faceou instalado no sistema operacional do usuário.
Pois font-familynão há valor padrão ou inicial específico; o valor inicial sempre depende do navegador e / ou sistema operacional.
Nomes de família genéricos
Se vários valores forem usados para uma única declaração, é recomendável ter uma família genérica listada por último como substituto para garantir a melhor experiência tipográfica:
code ( font-family: Courier, Monaco, monospace; )No exemplo acima, “Courier” e “Monaco” são nomes de família reais de fontes reais, enquanto “monoespaço” é apenas uma referência genérica a qualquer fonte instalada no sistema do usuário que seja monoespaçada.
Se os dois primeiros não forem encontrados instalados, o navegador selecionará a melhor opção, mas apenas em fontes monoespaçadas. Sem a família genérica, a fonte seria padronizada para qualquer fonte padrão no sistema do usuário (provavelmente uma serifa ou sans-serif), o que seria indesejável.
Família de fontes genéricas incluem serif, sans-serif, cursive, fantasy, e monospace.
Se um sobrenome corresponder a um sobrenome genérico, o sobrenome deve ser citado para indicar que não é genérico.
Nomes de família com várias palavras
Se um sobrenome contiver várias palavras, separadas por espaços, é recomendável listar o sobrenome entre aspas (simples ou duplas):
code ( font-family: "Times New Roman", Georgia, serif; )Isso nem sempre é necessário, mas geralmente é mais seguro incluir as aspas para qualquer sobrenome que contenha espaços ou caracteres especiais.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | Funciona | Funciona | Funciona |