Grundlegende Verwendung von @Font-face und wie man es mit allen Browsern kompatibel macht
|
@Font-face grundlegende Einführung: @font-face ist eine CSS2-Syntax, mit der Sie eine benutzerdefinierte Schriftart auf einer Webseite anzeigen können. Auch wenn die Schriftart nicht auf dem Client-Computer installiert ist, kann die Webseite trotzdem angezeigt werden. Dieser Artikel stellt die grundlegende Verwendung von @font-face und seine Verwendung in allen Browsern vor. Grundlegende Syntax von @Font-face: @font-face { Schriftfamilie: <Name einer entfernten Schrift>; src: <Quelle> [,<Quelle>]*; [Schriftstärke: <Stärke>]; [Schriftstil: <Stil>]; } Weitere Informationen finden Sie hier: https://developer.mozilla.org/en/css/@font-face Ein Beispiel: @font-face { Schriftfamilie: MyHelvetica; Quelle: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), url(MgOpenModernaBold.ttf); Schriftstärke: fett; } font-family ist der Name der Schriftart, src ist der Pfad der Schriftart, die eine lokale Schriftart des Clients oder eine Schriftart auf dem Server sein kann. @Font-face aktuelle Browserkompatibilität: •Webkit/Safari (3.2+): TrueType/OpenType TT (.ttf), OpenType PS (.otf); •Opera (10+): TrueType/OpenType TT (.ttf), OpenType PS (.otf), SVG (.svg); •Internet Explorer: Seit IE4 unterstützt er Schriftdateien im EOT-Format; IE9 unterstützt WOFF; •Firefox (3.5+): TrueType/OpenType TT (.ttf), OpenType PS (.otf), WOFF (seit Firefox 3.6) • Google Chrome: TrueType/OpenType TT (.ttf), OpenType PS (.otf), WOFF seit Version 6 Aus dem oben Gesagten können wir schließen: .eot + .ttf /.otf + svg + woff = perfekte Unterstützung für alle Browser. @Font-face-Methode, um alle Browser kompatibel zu machen: Es gibt eine Schriftarten-Site, die @font-face gewidmet ist: http://www.fontsquirrel.com/fontface/generator Die Fontsquirrel-Website bietet ein kostenloses @font-face Kit Generator-Tool, das verschiedene Schriftformate generieren und Demos direkt in CSS und HTML bereitstellen kann. Ermöglicht Ihnen, Zitate direkt auf Ihrer Website einzufügen. Sie können einige von der Fontsquirrel-Website bereitgestellte Schriftarten direkt verwenden oder Ihre eigenen Schriftarten hochladen und verwenden. Demo des @font-face Kit Generators http://www.xunzou.com/demo/font-face/Chopin-Script-fontfacekit/demo.html Demo des @font-face Kit Generators http://www.font2web.com/ @font-face-Demo http://www.xunzou.com/demo/font-face/font-face.html Andere Schriftarten-Dienste: Die Google Font API ist auch ein guter Schriftartendienst. Andere Schriftartenersatzdienste sind Cufon usw. Weitere Informationen zur Google Font API finden Sie im vorherigen Artikel: http://www.xunzou.com/blog/post/619.html |
<<: Praktischer Bericht zur Lösung des MySQL Deep Paging-Problems
>>: TypeScript-Union-Typen, Schnittmengentypen und Typwächter
Artikel empfehlen
MySQL-Unterabfrage und Details zur Verknüpfungstabelle
Inhaltsverzeichnis 1. Was ist eine Unterabfrage? ...
Starten Sie die auf Docker basierende nginxssl-Konfiguration
Voraussetzungen Ein Cloud-Server (centOS von Alib...
Zusammenfassung einiger effizienter magischer Operatoren in JS
JavaScript veröffentlicht mittlerweile jedes Jahr...
VMware + Ubuntu18.04 Grafisches Tutorial zum Erstellen einer Hadoop-Clusterumgebung
Inhaltsverzeichnis Vorwort VMware-Klon virtueller...
Detaillierte Erläuterung der gespeicherten Prozeduren, Cursor und Transaktionsbeispiele von MySQL
Detaillierte Erläuterung der gespeicherten Prozed...
Beispiel für die reguläre Umschreibmethode für Nginx Rewrite (Matching)
Die Rewrite-Funktion von Nginx unterstützt regelm...
js, um einen Boden-Scrolling-Effekt zu erzielen
In diesem Artikel wird jQuery verwendet, um den E...
Detaillierte Erklärung der JS-Homologiestrategie und CSRF
Inhaltsverzeichnis Überblick Same-Origin-Policy (...
Detaillierte Erklärung der .bash_profile-Datei im Linux-System
Inhaltsverzeichnis 1. Umgebungsvariable $PATH: 2....
So ändern Sie die Master-Slave-Replikationsoptionen in MySQL online
Vorwort: Die am häufigsten verwendete Architektur...
Javascript um den Drag-Effekt der Login-Box zu erreichen
In diesem Artikel wird der spezifische Code von J...
40 Webseiten-Designs mit supergroßen Schriftarten
Heutige Webdesigns neigen dazu, sehr große Schrif...
vue.config.js Verpackungsoptimierungskonfiguration
Die Informationen auf Baidu sind so vielfältig, d...
Zusammenfassung zum Erlernen von HTML-Tags und Grundelementen
1. Elemente und Tags in HTML <br />Ein Elem...
So implementieren Sie Import- und Exportbefehle für MySQL-Datenbanken unter Linux
1. Exportieren Sie die Datenbank mit dem Befehl m...