Skip to content

O que é uma “pilha de fontes”?

4 de abril de 2021

Uma pilha de fontes é uma lista de fontes na declaração da família de fontes CSS. As fontes são listadas na ordem de preferência que você deseja que apareçam no caso de um problema, como uma fonte que não está carregando. Uma pilha de fontes permite controlar a aparência das fontes na página da web, mesmo se o computador do visitante do site não tiver a fonte inicial que você solicitou.

Sintaxe de pilha de fontes

Close-up de letras de madeira

Daniel Koszegi / EyeEm / Getty Images
Então, como é uma pilha de fontes? Aqui está um exemplo: body {
família da fonte: Georgia, “Times New Roman”, serif;
}

Existem algumas coisas a serem observadas aqui.

  • Os nomes das fontes são separados por vírgulas. Você pode adicionar quantas fontes desejar, contanto que sejam separadas por vírgulas. O navegador tentará carregar a primeira fonte especificada. Se isso falhar, ele irá percorrer a linha tentando cada fonte até encontrar uma que possa usar. Este exemplo usa fontes seguras para a web, e o computador de um visitante do site provavelmente tem a fonte Georgia. Caso contrário, o navegador moverá a pilha para baixo e tentará a próxima fonte especificada.
  • Nomes de fontes com várias palavras são colocados entre aspas. Fontes como Times New Roman, Trebuchet MS, Courier New, etc. requerem aspas duplas para que o navegador saiba que as palavras em cada nome de fonte pertencem juntas.
  • Uma pilha de fontes geralmente termina com uma classificação de fonte genérica (serifa ou sem serifa) Nesse caso, serifa diz ao navegador para usar uma fonte que pelo menos se enquadre nesta categoria se as fontes específicas na pilha não estiverem disponíveis. Por exemplo, se você estiver usando fontes sem serifa, como Arial e Verdana, finalizar uma pilha de fontes com a classificação de sem serifa irá garantir que, caso ocorra um problema de carregamento, a fonte renderizada pelo menos estará nesta categoria. Essa situação é cada vez mais rara, mas é melhor incluir a fonte genérica apenas por segurança.

Pilhas de fontes e fontes da web

Os sites modernos usam fontes da web que estão incluídas no site junto com outros recursos, como imagens, arquivos Javascript, etc., ou vinculadas a um repositório de fontes externo, como Google Fonts ou Typekit. Embora essas fontes devam carregar sem nenhum problema, o uso de uma pilha de fontes garante que você tenha algum controle sobre quaisquer problemas que surjam. A mesma coisa vale para fontes seguras para a web; eles residem na maioria dos computadores por padrão. (As fontes no exemplo aqui são todas seguras para a Web.) Embora a probabilidade de uma fonte estar faltando seja muito baixa, especificar uma pilha de fontes ajuda a renderizar o design tipográfico do site corretamente.

CSS em Design Tipográfico

As imagens ganham muito destaque quando se trata de sites, mas é na palavra escrita que os mecanismos de pesquisa confiam. Isso torna o design tipográfico extremamente importante. Com a importância do texto de um site, vem a necessidade de garantir que ele seja atraente e fácil de ler. Isso é feito com CSS (Cascading Style Sheets). No web design moderno, o CSS mantém as especificações que governam o estilo de um site separadas daquelas que ditam sua estrutura (HTML).