Maison > Article > interface Web > Comment ajouter des polices non standards au site Web en CSS ?
Comment ajouter des polices non standards au site Web en CSS ?
- PHPzavant
- 2023-08-22 09:37:021092parcourir
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;
}
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;
}
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>
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');
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>
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!