Comment introduire des polices externes en CSS ? méthode de définition du style de police CSS (exemple)

Dans l'affichage du navigateur, différents styles de police sur la page améliorent non seulement la beauté de la page, mais améliorent également l'interactivité de navigation de l'utilisateur. Alors, comment ces différents styles de police sont-ils définis avec CSS ? Ce chapitre va vous montrer Comment introduire des polices externes en CSS ? méthode de définition du style de police CSS (exemple) . Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Quelle est la fonction et l'utilisation de l'attribut font-family ?

1. Le rôle de l'attribut font-family

L'attribut font-family vous permet d'utiliser du code CSS pour définir le style de police. pour l'affichage du texte sur la page Par exemple : Song Dynasty, Microsoft Yahei, etc. L'attribut font-family définit différentes polices pour rendre l'affichage de la page plus coordonné et plus beau.

L'attribut font-family peut définir plusieurs valeurs (polices), séparées par des virgules. Si le navigateur ne prend pas en charge la première police, il essaiera la suivante jusqu'à ce qu'elle soit reconnue. Le navigateur utilisera la première valeur qu'il reconnaît.

2. Utilisation de l'attribut font-family

font-family:"设置字体名称";

Exemple :

code CSS :

.demo{ font-family:"微软雅黑";}

html Code :

<div class="demo">我是一段测试文字</div>

De cette façon, tout le texte de la zone de démonstration sera affiché dans le style de police Microsoft Yahei.

2. Comment introduire des polices externes dans CSS ?

Les polices couramment utilisées dans les navigateurs généraux incluent : Song Dynasty, Heilongjiang, Microsoft Yahei, etc. Parce que lorsque la page Web est chargée et que la police est sélectionnée, la police de texte de la bibliothèque de texte du système du visiteur est appelée. Si la police n'est pas trouvée, la police Web par défaut sera affichée. Le système d'exploitation installé par tout le monde possède ces polices par défaut, ces polices sont donc également appelées polices sécurisées. Mais pour certains besoins particuliers, nous pouvons référencer des polices externes pour afficher des styles de texte personnalisés et esthétiques.

Comment introduire des polices externes (@font-face) dans CSS :

1. 🎜 >

@font-face vous permet d'utiliser des polices qui ne sont pas installées sur votre ordinateur dans les pages Web, en vous débarrassant complètement des restrictions des polices sûres. Installez simplement le package de polices sur le serveur Lorsque l'utilisateur charge la page Web, le package de polices sera automatiquement téléchargé sur la machine de l'utilisateur pour garantir que les polices peuvent être rendues correctement.

2. Étapes pour introduire les polices externes en CSS

1) Introduire la police en CSS et personnaliser un nom pour la police externe

@font-face {
    /* font-properties */
    font-family: 用户自定义的字体名称;
    src:url('加载外部字体文件的文件地址'),  
    url('加载外部字体文件的文件地址'),
    url('加载外部字体文件的文件地址'); /* IE9 */
}

font-family définit le nom de la police et le src suivant est l'emplacement où le fichier de police est chargé. La raison pour laquelle il existe plusieurs URL est due à des problèmes de compatibilité du navigateur.

2) Utiliser la police que nous venons de définir

div {
    font-family: 用户自定义的字体名称;
}

Exemple de code :

@font-face {
	 font-family: 'YaHei Consolas Hybrid';
	src: url('../fonts/yaheiconsolashybrid.ttf');
}

body {
	font-family: 'YaHei Consolas Hybrid';
	font-size: 16px;
}

Prise en compte des différentes polices du navigateur le format est différent (compatible avec les navigateurs)

/*字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、IPhone 
*/
@font-face {
    font-family: 'HansHandItalic';
    src: url('fonts/hanshand-webfont.eot');
    src: url('fonts/hanshand-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/hanshand-webfont.woff') format('woff'),
         url('fonts/hanshand-webfont.ttf') format('truetype'),
         url('fonts/hanshand-webfont.svg#webfont34M5alKg') format('svg');
    font-weight: normal;
    font-style: normal;
}

3. Les avantages de l'introduction de polices externes en CSS :

Avec @ La popularité croissante de font-face a donné naissance à un certain nombre de nouveaux jeux d'icônes de format de police appelés polices Web. Ces polices Web présentent les avantages suivants par rapport aux polices sécurisées ordinaires :

1) Elles utilisent du texte réel au lieu d'images. Le zoom avant et arrière n'affectera pas l'effet de rendu et l'expérience utilisateur est bonne ; 🎜>2) Peut être reconnu par les moteurs de recherche

3) Contrairement aux images qui doivent être régénérées à chaque fois, il est plus pratique d'ajouter et de supprimer.

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!