Comment ajouter des polices non standards au site Web en CSS ?-tutoriel CSS-php.cn

Comment ajouter des polices non standards au site Web en CSS ?

PHPz

Libérer： 2023-08-22 09:37:02

avant

1195 Les gens l'ont consulté

Comment ajouter des polices non standards au site Web en CSS ?

Polices non standard fait référence à toute police en CSS qui ne fait pas partie de l'ensemble de polices par défaut disponible dans la plupart des navigateurs. Les polices par défaut incluent Arial, Times New Roman et Verdana, qui sont des polices standard car elles sont préinstallées sur la plupart des ordinateurs et appareils.

Polices non standard sont des polices qui ne sont pas préinstallées et doivent être spécifiquement chargées sur le site Web pour pouvoir être utilisées. Ces polices peuvent être obtenues sur des sites Web tels que Google, Adobe ou MyFonts. Ils peuvent également être conçus sur mesure ou achetés.

L'utilisation de polices non standard peut contribuer à ajouter une touche unique et personnelle à la conception de votre site Web. Ils sont souvent utilisés pour créer un look spécifique ou établir l’identité visuelle d’une marque.

Ajoutez des polices non standard au site Web en CSS

La typographie joue un rôle essentiel lors de la conception d'un site Web. Les polices par défaut fournies en CSS, telles qu'Arial, Times New Roman et Verdana, bien que fonctionnellement disponibles, semblent souvent fades et génériques.

La règle @font-face permet de spécifier des fichiers et des propriétés de polices afin que les polices puissent être appliquées à des éléments spécifiques de la page.

Syntaxe

La syntaxe d'utilisation des règles @font-face est la suivante -

@font-face {
   font-family: 'MyFont';
   src: url('path/to/MyFont.ttf') format('truetype');
   font-weight: normal;
   font-style: normal;
}

Copier après la connexion

Dans cet exemple, nous avons spécifié la famille de polices comme « MyFont », qui est le nom qui sera utilisé pour référencer cette police dans tout le CSS. L'attribut 'src' spécifie l'emplacement du fichier de police et l'attribut 'format' spécifie le format de fichier de la police. Pour une meilleure compatibilité avec les navigateurs, il est recommandé d'inclure plusieurs formats de police, tels que truetype, woff, woff2, eot, etc.

Une fois qu'une police est définie à l'aide de la règle @font-face, elle peut être appliquée à des éléments spécifiques de la page à l'aide de l'attribut 'font-family'. Dans l'exemple ci-dessous, nous appliquons la police personnalisée 'MyFont' à l'élément 'body' −

body {
   font-family: 'MyFont', Fallback, sans-serif;
}

Copier après la connexion

La traduction chinoise de

Exemple

est :

Exemple

<html>
<head>
   <style>
      body {
         background-color:pink;
      }
      @font-face {
         font-family: 'MyFont';
         src: url('/css/font/SansationLight.woff')
         format('truetype');
         font-weight: normal;
         font-style: normal;
      }
      p {
         font-family: 'MyFont', Fallback, sans-serif;
      }
      .div {
         font-family: 'MyFont', Arial, sans-serif;
      }
   </Style>
</head>
<body>
   <div class="div">This is the example of font face with CSS3.</div>
   <p><b>Original Text :</b>This is the example of font face with CSS.</p>
</body>
</html>

Copier après la connexion

Nous pouvons également utiliser @import pour importer des polices à partir de sources distantes telles que Google Fonts ou tout autre service d'hébergement de polices.

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');

Copier après la connexion

La traduction chinoise de

Exemple

est :

Exemple

<!DOCTYPE html>
<html>
   <title>Google fonts example</title>
   <head>
      <link href="https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap" rel="stylesheet"/>
      <style>
         body {
            font-family: "Permanent Marker";
            font-size: 15px;
         }
      </style>
   </head>
<body>
   <h1>Google fonts example</h1>
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiore. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis non a quos repudiandae doloribus cumque! Ex rem rerum aut maiores</p>
</body>
</html>

Copier après la connexion

Conclusion

Grâce aux étapes ci-dessus, nous avons réussi à ajouter des polices non standard au site Web. N'oubliez pas qu'il est important de s'assurer que les fichiers de polices sont hébergés sur le serveur et accessibles au navigateur afin que les polices s'affichent correctement.

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!