Polices CSS3
@font-face est un module en CSS3. Il intègre principalement des polices Web auto-définies dans vos pages Web. Avec l'émergence du module @font-face, nous n'avons plus besoin d'utiliser de polices dans le développement Web. vous inquiétez de n'utiliser que des polices sécurisées pour le Web ! Certaines personnes se demanderont certainement si IE peut prendre en charge une telle chose ? Laissez-moi vous dire que la fonction @font-face a été prise en charge dès IE4. Vous serez certainement surpris. Si vous voyez des sites Web ou des blogs en anglais et voyez de belles polices Web personnalisées, telles que le logo sur la page d'accueil, les balises et le style anglais manuscrit sur la page, en un mot, elles sont toutes implémentées par @font-face.
Tout d'abord, jetons un œil aux règles grammaticales de @font-face :
@ font-face {
[font-family : <family-name>;]?
[src: [ <uri> [format(<string>#)] | <font-face-name> ]#;]?
[plage unicode : <urange>#;]?
[font-variant : <font-variant>; ] ?
[font-feature-settings : normal|<feature-tag-value>#;]?
[font-stretch : <font-stretch>;] ? 🎜>
[font-weight : <weight>]; [font-style : <style>];}Description de la valeur : font-family : Définissez le nom de la police du texte. font-style : définit le style du texte. font-variant : définissez si le texte est en majuscule ou en minuscule. font-weight : Définissez l'épaisseur du texte. font-stretch : Définissez si le texte est étiré horizontalement. font-size : définissez la taille de la police du texte. src : Définissez le chemin relatif ou le chemin absolu de la police personnalisée. Notez que cet attribut ne peut être utilisé que dans les règles @font-face.Navigateurs compatibles
En parlant de problèmes de compatibilité des navigateurs avec @font-face, cela implique un problème de format de police, car différents navigateurs ont une prise en charge incohérente pour les formats de polices, il est donc nécessaire que chacun comprenne quels types de polices sont pris en charge par les différentes versions des navigateurs. J'ai brièvement mentionné plusieurs formats liés aux polices plus tôt. J'en parlerai séparément ci-dessous. Question, laissez chacun avoir une idée : 1. Format TrueTpe (.ttf) : La police .ttf est la police la plus courante pour Windows et Mac, et est un format RAW, elle n'est donc pas optimisée pour le site Web. les navigateurs prenant en charge cette police incluent [IE9+, Firefox3.5+, Chrome4+, Safari3+, Opera10+, iOS Mobile Safari4.2+] 2. Format OpenType (.otf) : . La police otf est considérée comme un format de police original, construit sur la base de TrueType, elle fournit donc également plus de fonctions. Les navigateurs qui prennent en charge cette police sont [Firefox3.5+, Chrome4.0+, Safari3.1+, Opera10. 0+, iOS Mobile Safari4.2+] ; 3. Format Web Open Font Format (.woff) : .woff La police est le meilleur format parmi les polices Web. version compressée de TrueType/OpenType ouvert et prend également en charge la séparation des packages de métadonnées. Les navigateurs prenant en charge cette police incluent [IE9+, Firefox3.5+, Chrome6+, Safari3+, Opera11.1+] ;4. Format Embedded Open Type (.eot) :
La police .eot est une police spéciale pour IE. Ce format de police peut être créé à partir de TrueType. Les navigateurs qui prennent en charge cette police sont [IE4+] ;
5. Format SVG (.svg) :
La police .svg est un format basé sur le rendu des polices SVG. Les navigateurs qui prennent en charge cette police incluent [Chrome4+, Safari3.1+, Opera10. +, iOS Mobile Safari3.2+].
Remarque : Pour implémenter les effets de navigateur dans cette section, vous devez télécharger les fichiers au format de police ci-dessus ! ! !
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}
div
{
font-family:myFirstFont;
}
</style>
</head>
<body>
<div>
使用CSS3,网站终于可以使用字体以外的预先选择“合法”字体。
</div>
<p><b>注意:</b> 需要引入外部字体文件显示效果。</p>
</body>
</html>
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
