Definindo Fontes de Aparência Nativa em Sites em Várias Plataformas

Introdução

Garantir uma aparência de fonte nativa consistente em todas as plataformas é crucial para experiências web híbridas perfeitas. Demonstraremos como usar pilhas de fontes CSS para priorizar fontes nativas no iOS, macOS e Android, com fallbacks para fontes personalizadas e genéricas.

Pré-requisitos

Noções básicas de HTML e CSS
Editor de texto ou IDE
Navegador da web para testes

Instruções

1. Defina a pilha de fontes

No seu CSS, use font-family para definir a pilha de fontes para os elementos desejados, priorizando fontes nativas por plataforma:

css

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', 'Nanum Gothic', sans-serif;
}

Ordem da pilha de fontes:

-apple-system: fonte do sistema iOS e macOS
BlinkMacSystemFont: fonte do sistema macOS mais recente
'Roboto': fonte padrão do Android
'Helvetica Neue': fallback mais antigo do iOS/macOS
'Nanum Gothic': fonte personalizada se as fontes do sistema não estiverem disponíveis
sans-serif: família de fontes genérica de fallback

2. Inclua fontes personalizadas (opcional)

Para fontes personalizadas como 'Nanum Gothic', inclua arquivos de fonte nos assets do seu projeto. Use @font-face no CSS para especificar o arquivo e a localização:

css

@font-face {
  font-family: 'Nanum Gothic';
  src: url('caminho/para/nanum-gothic.woff2') format('woff2'),
       url('caminho/para/nanum-gothic.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

Para TailwindCSS, veja Integrando Fontes Personalizadas em um Projeto Vue3 CLI com TailwindCSS.

3. Aplique a pilha de fontes aos elementos

Use seletores CSS para aplicar font-family a elementos específicos:

css

h1, h2, h3 {
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', 'Nanum Gothic', sans-serif;
}

p {
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', 'Nanum Gothic', sans-serif;  
}

Conclusão

Ao definir a pilha de fontes CSS na ordem de prioridade da plataforma, seu site usará fontes nativas em cada plataforma para uma aparência familiar e coesa. A pilha começa com fontes do sistema iOS/macOS, a fonte padrão do Android e, em seguida, fallbacks personalizados e genéricos.

Essa abordagem garante que a tipografia do seu site pareça nativa e perfeita em todos os dispositivos e plataformas.

Definindo Fontes de Aparência Nativa em Sites em Várias Plataformas ​

Introdução ​

Pré-requisitos ​

Instruções ​

1. Defina a pilha de fontes ​

2. Inclua fontes personalizadas (opcional) ​

3. Aplique a pilha de fontes aos elementos ​

Conclusão ​