Comment introduire des polices externes CSS ? Introduction à l'introduction des polices externes CSS

Parfois, nous avons besoin d'une belle police sur une page de site Web. Après tout, une belle police rendra la page entière plus belle et plus attrayante pour les utilisateurs. Nous pouvons penser à utiliser des images pour obtenir cette belle apparence. police, mais cet article d'aujourd'hui n'a pas pour but de vous présenter l'utilisation d'images pour créer une belle police, mais de vous présenter la méthode d'introduction des polices externes en CSS.

Sans plus tard, allons droit au but~

Ce que nous devons utiliser lors de l'introduction des polices externes CSS, c'est la @font-face de CSS3 Qu'est-ce que @font-. affronter? Jetons un coup d'oeil ci-dessous

@font-face est un module en CSS3 il intègre principalement des polices Web auto-définies dans vos pages Web.

Tout d'abord, examinons les règles de syntaxe de @font-face :

@font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

font-family : > : puisque Définissez le nom de la police (généralement défini sur le nom de la police importée), et la police sera référencée par ce nom dans les règles de style ultérieures.

src  : définissez le chemin de chargement et le format de la police, séparez plusieurs chemins de chargement et formats par des virgules

Remarque : il y a également un local (nom de la police) après le champ d'attribut src, indiquant que la police est chargée à partir du système utilisateur et que la police Web n'est chargée qu'après un échec.

src: local(font name), url("font_name.ttf")

srouce  : Le chemin de chargement de la police, qui peut être une URL absolue ou relative.

format  : Le format de la police, principalement utilisé pour la reconnaissance du navigateur, comprend généralement les types suivants - truetype, opentype, truetype-aat,embedded-opentype, avg, etc.

font-weight et font-style sont les mêmes que ceux utilisés auparavant.

Jetons ensuite un coup d'œil à la méthode d'implémentation de

introduction de la police externe CSS :

La première étape consiste à introduire la police en CSS et à lui donner un nom approprié. Comme suit

Téléchargez d'abord la police et placez-la dans le répertoire des polices

font.css :

@font-face {
 font-family: 'fontnameRegular';
 src: url('fontname.eot');
 src: local('fontname Regular'),
        local('fontname'),
        url('fontname.woff') format('woff'),
        url('fontname.ttf') format('truetype'),
        url('fontname.svg#fontname') format('svg');
}

Remarque :

fontname représente la police Le nom du fichier

Par exemple, si votre fichier de police est php.ttf, alors le nom de la police ci-dessus doit être remplacé par php

font-family définit le nom de la police, et le src suivant consiste à charger la police. La raison pour laquelle il y a plusieurs URL dans l'emplacement du fichier est due à des problèmes de compatibilité du navigateur.

La deuxième étape consiste à utiliser la police que vous venez de définir, comme suit

h1{font-family: fontnameRegular}

Cet article se termine ici Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes pertinentes du didacticiel. Site Web chinois PHP ! ! !

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!