Maîtriser les piles de polices système en CSS

Introduction

Dans ce laboratoire, nous allons explorer le concept de piles de polices système en CSS. Vous allez apprendre à définir une liste de polices que le navigateur cherchera sur le système d'exploitation de l'utilisateur, et à utiliser cette technique pour obtenir une sensation d'application native sur vos pages web. À la fin du laboratoire, vous aurez une compréhension solide de la manière de mettre en œuvre des piles de polices système dans vos propres projets.

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{{"Pile de police système"}} css/fonts -.-> lab-35246{{"Pile de police système"}} end

Pile de police système

index.html et style.css ont déjà été fournis dans la machine virtuelle.

Pour obtenir une sensation d'application native, utilisez la police native du système d'exploitation. Définissez une liste de polices à l'aide de font-family. Le navigateur recherche chaque police successivement, privilégiant la première si possible, et passant à la suivante s'il ne peut pas trouver la police (sur le système ou définie en CSS). Utilisez -apple-system pour San Francisco sur iOS et macOS (pas Chrome), et BlinkMacSystemFont pour San Francisco sur macOS Chrome. Pour Windows 10, utilisez 'Segoe UI', pour Android utilisez Roboto, pour Linux avec KDE utilisez Oxygen-Sans, pour Ubuntu (toutes les variantes) utilisez Ubuntu, et pour Linux avec GNOME Shell utilisez Cantarell. Pour macOS 10.10 et inférieur, utilisez 'Helvetica Neue' et Helvetica. Pour une police sans-serif de repli largement prise en charge par tous les systèmes d'exploitation, utilisez Arial. Pour appliquer la police système à un texte spécifique, utilisez le HTML et le CSS suivants :

<p class="system-font-stack">Ce texte utilise la police système.</p>

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

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur les piles de polices système. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.