Dominando las pilas de fuentes del sistema en CSS

Introducción

En este laboratorio, exploraremos el concepto de pilas de fuentes del sistema en CSS. Aprenderás cómo definir una lista de fuentes que el navegador buscará en el sistema operativo del usuario y cómo utilizar esta técnica para lograr una sensación de aplicación nativa en tus páginas web. Al final del laboratorio, tendrás una comprensión sólida de cómo implementar pilas de fuentes del sistema en tus propios proyectos.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/fonts("Fonts") subgraph Lab Skills css/selectors -.-> lab-35246{{"Pila de fuentes del sistema"}} css/fonts -.-> lab-35246{{"Pila de fuentes del sistema"}} end

Pila de fuentes del sistema

index.html y style.css ya se han proporcionado en la máquina virtual.

Para lograr una sensación de aplicación nativa, utiliza la fuente nativa del sistema operativo. Define una lista de fuentes utilizando font-family. El navegador busca cada fuente sucesiva, prefiriendo la primera si es posible y recurriendo a la siguiente si no puede encontrar la fuente (en el sistema o definida en CSS). Utiliza -apple-system para San Francisco en iOS y macOS (no en Chrome), y BlinkMacSystemFont para San Francisco en Chrome de macOS. Para Windows 10, utiliza 'Segoe UI', para Android utiliza Roboto, para Linux con KDE utiliza Oxygen-Sans, para Ubuntu (todas las variantes) utiliza Ubuntu, y para Linux con GNOME Shell utiliza Cantarell. Para macOS 10.10 y versiones inferiores, utiliza 'Helvetica Neue' y Helvetica. Para una fuente sans serif de respaldo ampliamente compatible con todos los sistemas operativos, utiliza Arial. Para aplicar la fuente del sistema a un texto específico, utiliza el siguiente HTML y CSS:

<p class="system-font-stack">This text uses the system font.</p>

.system-font-stack {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
    Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicidades! Has completado el laboratorio de Pila de fuentes del sistema. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.