'Que signifie font-family-apple-system ?'-tutoriel CSS-php.cn

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

WBOY

Libérer： 2023-08-23 10:49:02

avant

1149 Les gens l'ont consulté

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, ...

Copier après la connexion

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;

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!