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

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.

introduction de la police externe 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');
}

h1{font-family: fontnameRegular}

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!