O que são fallbacks de fonte CSS

CSS fornece dois tipos de famílias de fontes i.e. Família genérica de fontes e fontes individuais. As famílias genéricas têm famílias de fontes de aparência semelhante, como serif (Times New Roman, Geórgia e Garamond), Monospace (Courier New, Lucida Console, Mônaco), etc. Enquanto a fonte individual especifica apenas uma família de fontes em particular, como Arial, Calibri, etc.

As famílias de fontes genéricas fornecem um mecanismo de retorno que nos permite especificar uma lista de fontes parecidas para que, se a primeira fonte não estiver disponível em nenhuma plataforma, o navegador poderá escolher a segunda fonte, e assim por diante.

Este artigo apresenta um entendimento detalhado das seguintes terminologias relacionadas aos fallbacks da fonte:

• O que são fallbacks de fontes em CSS
• A sintaxe básica dos fallbacks da fonte
• Como usar fallbacks de fontes no CSS

Então, sem nenhum atraso, vamos prosseguir!

Fallbacks de fontes

Sempre há uma chance de que uma fonte não seja encontrada em uma plataforma específica ou não seja instalada corretamente em um dispositivo. Portanto, os fallbacks da fonte são usados ​​como fontes de backup i.e. Temos que especificar uma lista de fontes de backup para que, se a primeira fonte não estiver disponível, o navegador deve tentar o próximo, e assim por diante. Os fallbacks da fonte são estruturados com cinco famílias de fontes genéricas, conforme mencionado abaixo:

• Fontes serif no CSS: Especifique alguns pequenos golpes nervosos
• Fontes sem serrif em CSS: Especifique linhas limpas, sem arestas
• Fontes cursivas no CSS: Especifique um estilo próximo à escrita humana
• Fontes de fantasia no CSS: Especifique alguns estilos de fonte sofisticados

É uma boa prática que adicionar a família de fontes genéricas no final da lista.

Sintaxe

A sintaxe básica dos fallbacks da fonte é descrita no seguinte snippet:

Aqui, na família de fontes, especificamos duas fontes, primeiro será a primeira opção do navegador, enquanto o restante será a lista de fallbacks da fonte.

Como usar fallbacks de fontes no CSS

As fontes têm um grande efeito na interface do usuário de qualquer página da web, então escolher a fonte de fallback mais adequada é muito importante eu.e. Escolhendo “Console de Lucida” Como um backup do “Times New Roman” Fonte não seria uma boa escolha. Escolher um estilo de backup na mesma família de fontes seria considerado uma boa prática que eu.e. "Times" será um melhor de fallback para o “Times New Roman”.

Exemplo

Vamos considerar o código abaixo para entender o conceito de fallback da fonte no CSS:

Html

Fontes fallbacks em CSS

Primeiro parágrafo

Segundo parágrafo

CSS

corpo
Fonte-família: Cambria, Cochin, Geórgia, Times, 'Times New Roman', Serif;

Aqui no código acima, o navegador tentará primeiro especificar o estilo de fonte "Cambria"

• Se estiver disponível, todo o corpo será de acordo com o "Cambria".
• Se, por algum motivo, "Cambria" não estiver disponível, o navegador utilizará a segunda opção i.e. “Cochin”
• Da mesma forma, o navegador usará outra opção se as opções anteriores não funcionarem corretamente:

A saída acima verifica que o navegador utiliza o estilo "Cambria".

Suponha que a primeira fonte não funcione por algum motivo, então o navegador utilizará a opção Fallback, como mostrado na tela a seguir:

O mesmo código foi executado, mas desta vez devido a alguns motivos pelos quais o estilo da fonte "Cambria" não está disponível, então o navegador usa a opção de fallback i.e. “Cochin”.

Conclusão

Fallbacks da fonte CSS fornecem um backup para as fontes i.e. Se uma fonte não funcionar corretamente, o navegador tentará o outro. Para uma boa prática de codificação, escreva uma família de fontes genéricas no final da lista e escolha o fallback da fonte dentro da mesma família de fontes. Este artigo demonstrou o que é um fallback de fonte, como está estruturado e como usá-lo.