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. 🎜 >

2. Étapes pour introduire les polices externes en CSS

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

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

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

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

/*字体后缀和浏览器有关，如下所示
* .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 :

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!