Configurar Fuentes de Aspecto Nativo en Sitios Web a Través de Plataformas

Introducción

Garantizar una apariencia de fuente nativa consistente en todas las plataformas es crucial para experiencias web híbridas sin problemas. Demostraremos cómo usar pilas de fuentes CSS para priorizar fuentes nativas en iOS, macOS y Android, con alternativas para fuentes personalizadas y genéricas.

Requisitos Previos

Conceptos básicos de HTML y CSS
Editor de texto o IDE
Navegador web para pruebas

Instrucciones

1. Definir la Pila de Fuentes

En su CSS, use font-family para definir la pila de fuentes para los elementos deseados, priorizando las fuentes nativas por plataforma:

css

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

Orden de la pila de fuentes:

-apple-system: fuente del sistema iOS y macOS
BlinkMacSystemFont: fuente del sistema macOS más reciente
'Roboto': fuente predeterminada de Android
'Helvetica Neue': alternativa para iOS/macOS antiguos
'Nanum Gothic': fuente personalizada si las fuentes del sistema no están disponibles
sans-serif: familia de fuentes genérica alternativa

2. Incluir Fuentes Personalizadas (Opcional)

Para fuentes personalizadas como 'Nanum Gothic', incluya los archivos de fuentes en los recursos de su proyecto. Use @font-face en CSS para especificar el archivo y la ubicación:

css

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

Para TailwindCSS, consulte Integrando Fuentes Personalizadas en un Proyecto Vue3 CLI con TailwindCSS.

3. Aplicar la Pila de Fuentes a los Elementos

Use selectores 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; 
}

Conclusión

Al establecer la pila de fuentes CSS en el orden de prioridad de la plataforma, su sitio web usará fuentes nativas en cada plataforma para una apariencia familiar y coherente. La pila comienza con las fuentes del sistema iOS/macOS, la fuente predeterminada de Android, luego las alternativas personalizadas y genéricas.

Este enfoque garantiza que la tipografía de su sitio web se vea nativa y sin problemas en todos los dispositivos y plataformas.

Configurar Fuentes de Aspecto Nativo en Sitios Web a Través de Plataformas ​

Introducción ​

Requisitos Previos ​

Instrucciones ​

1. Definir la Pila de Fuentes ​

2. Incluir Fuentes Personalizadas (Opcional) ​

3. Aplicar la Pila de Fuentes a los Elementos ​

Conclusión ​