recherche

Maison  >  Article  >  interface Web  >  "Que signifie font-family-apple-system ?"

"Que signifie font-family-apple-system ?"

WBOY
WBOYavant
2023-08-23 10:49:021087parcourir

En CSS, la propriété 'font-family' est utilisée pour définir la police du contenu texte d'un élément HTML. Il accepte plusieurs noms de polices comme valeurs. Si le navigateur ne prend pas en charge la première police, il définit le style de police suivant pour l'élément HTML.

Les utilisateurs peuvent utiliser la propriété CSS 'font-family' selon la syntaxe suivante. 

font-family: value1, value2, value3, ...

La valeur « -apple-system » de la propriété CSS « ​​font-family » permet aux développeurs de définir la même police que le système d'exploitation Apple pour le contenu HTML de la page Web. Cela signifie que nous pouvons définir des polices en fonction des préférences de l'appareil de l'utilisateur.

Grammaire

Les utilisateurs peuvent utiliser la police "-apple-system" comme propriété CSS "font-family" selon la syntaxe ci-dessous. 

font-family: -apple-system;

Exemple 1

Dans l'exemple ci-dessous, nous définissons la famille de polices "-apple-system" pour le contenu texte de l'élément HTML. Si vous utilisez un appareil Apple, vous pouvez constater qu'il définit la police selon les mêmes spécifications que votre appareil Apple. 

<html>
<head>
   <style>
      .text {
         font-size: 1.6rem;
         font-family: -apple-system;
         color: blue;
      }
   </style>
</head>
<body>
   <h2>Using the <i> -apple-system </i> fonts to set the font according to apple device's font</h2>
   <p class = "text"> Welcome to the TutorialsPoint! </p>
</body>
</html>
La traduction chinoise de

Exemple 2

est :

Exemple 2

Dans l'exemple ci-dessous, nous ajoutons "BlinkMacSystemFont" aux alternatives comme deuxième valeur de la propriété de la famille de polices. Ici, pour les navigateurs Firefox et Opera, la valeur "-apple-system" est utilisée, tandis que le navigateur Chrome prend en charge "BlinkMacSystemFont". De plus, nous avons utilisé d’autres polices comme valeurs alternatives. Ainsi, "font-family" sélectionnera la police suivante jusqu'à ce qu'elle en trouve une qui soit prise en charge par le navigateur spécifique. 

<html>
<head>
   <style>
      .text {
         font-size: 1.6rem;
         font-family: -apple-system, BlinkMacSystemFont, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
         color: green;
      }
   </style>
</head>
<body>
   <h2>Using the <i> -apple-system </i> fonts to set the font according to apple device's font</h2>
   <p class = "text"> Hey! How are you? </p>
</body>
</html>

Les utilisateurs ont appris à utiliser la famille de polices « -apple-system » pour sélectionner les polices des appareils Apple afin de sélectionner les polices en fonction des préférences de l'appareil de l'utilisateur. De plus, nous configurons des polices de secours au cas où le navigateur ne trouverait pas les polices de l'appareil.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Comment désactiver les événements de clic en CSSArticle suivant：Comment désactiver les événements de clic en CSS

Articles Liés

Voir plus