O design tipográfico é uma peça extremamente importante para o design de um site de sucesso. Criar sites com texto que seja fácil de ler e que pareça ótimo é o objetivo de todo profissional de web design. Para conseguir isso, você precisará ser capaz de definir as fontes específicas que deseja usar em suas páginas da web. Para especificar o tipo de letra ou família de fontes em seus documentos da Web, você usará a propriedade de estilo de família de fontes em seu CSS. O estilo de família de fontes mais simples que você poderia usar incluiria apenas uma família de fontes: p {
família da fonte: Arial;
}
class = “ql-syntax”> Se você aplicasse este estilo a uma página, todos os parágrafos seriam exibidos na família de fontes “Arial”. Isso é ótimo e como “Arial” é o que é conhecido como uma “fonte segura para a web”, o que significa que a maioria (senão todos) os computadores a teriam instalado, você pode ficar tranquilo sabendo que sua página será exibida na fonte desejada. Então, o que acontece se a fonte selecionada não puder ser encontrada? Por exemplo, se você não usar uma “fonte segura para a Web” em uma página, o que o agente do usuário fará se não tiver essa fonte? Eles fazem uma substituição. Isso pode resultar em algumas páginas de aparência divertida. Certa vez, fui a uma página em que meu computador o exibia inteiramente em “Wingdings” (um conjunto de ícones) porque meu computador não tinha a fonte que o desenvolvedor havia especificado e meu navegador fez uma escolha abismal em que fonte iria usar como um substituto. A página estava totalmente ilegível para mim! É aqui que uma pilha de fontes entra em jogo.
Separe várias famílias de fontes com uma vírgula em uma pilha de fontes
Uma “pilha de fontes” é uma lista de fontes que você deseja que sua página use. Você colocaria suas opções de fonte em ordem de sua preferência e separaria cada uma com uma vírgula. Se o navegador não tiver a primeira família de fontes na lista, ele tentará a segunda, a terceira e assim por diante até encontrar uma que tenha no sistema. família de fontes: Pussycat, Algerian, Broadway;
No exemplo acima, o navegador procurará primeiro a fonte “Pussycat”, depois “Algerian” e depois “Broadway” se nenhuma das outras fontes for encontrada. Isso lhe dá mais chance de que pelo menos uma das fontes escolhidas seja usada. Não é perfeito, é por isso que temos ainda mais para adicionar à nossa pilha de fontes (continue lendo!).
Usar fontes genéricas por último
Assim, você pode criar uma pilha de fontes com uma lista de fontes e ainda não ter nenhuma que o navegador possa encontrar. Você não quer que sua página apareça ilegível se o navegador fizer uma escolha de substituição ruim. Felizmente, o CSS tem uma solução para isso também, e é chamado de fontes genéricas. Você deve sempre terminar sua lista de fontes (mesmo que seja uma lista de uma família ou apenas fontes seguras para a web) com uma fonte genérica. Existem cinco que você pode usar:
- Cursivo
- Fantasia
- Monoespaço
- Sem serifa
- Serif
Os dois exemplos acima podem ser alterados para: font-family: Arial, sans-serif;
class = “ql-syntax”> ou font-family: Pussycat, Algerian, Broadway, fantasy;
class = “ql-syntax”>
Alguns nomes de família de fontes têm duas ou mais palavras
Se a família de fontes que você deseja usar tiver mais de uma palavra, coloque-a entre aspas duplas. Embora alguns navegadores possam ler famílias de fontes sem aspas, pode haver problemas se o espaço em branco for condensado ou ignorado. família da fonte: “Times New Roman”, serif;
Neste exemplo, você pode ver que o nome da fonte “Times New Roman”, que contém várias palavras, está entre aspas. Isso informa ao navegador que todas as três palavras fazem parte do nome da fonte, ao contrário de três fontes diferentes, todas com nomes de uma palavra.
