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
Detaillierter Prozess zur Verwendung von VMware zum Testen des PXE-Batchinstallationsservers
Inhaltsverzeichnis 1. Vorbereitung 1. Bereiten Si...
echars 3D-Kartenlösung für benutzerdefinierte Farben von Regionen
Inhaltsverzeichnis Frage verlängern Lösung des Pr...
Beispielcode mit Vue-Router in HTML
Einführung in Vue und Vue-Router <script src=&...
Beispielcode zum Konfigurieren von Nginx zur Unterstützung von https
1. Einleitung Lassen Sie Ihre Website immer noch ...
Was ist Tabellenpartitionierung und -partitionierung?MySql-Datenbankpartitionierung und Tabellenpartitionierungsmethode
1. Warum müssen wir Tabellen und Partitionen auft...
MySQL-Tutorial: Datendefinitionssprache (DDL), Beispiel, ausführliche Erklärung
Inhaltsverzeichnis 1. Einführung in die Grundfunk...
Zusammenfassung der SQL-Deduplizierungsmethoden
Wenn wir SQL zum Extrahieren von Daten verwenden,...
Das Textarea-Tag kann nicht in der Größe geändert und nicht mit der Maus gezogen werden
Die Größe des Textbereich-Tags ist unveränderlich ...
Verwenden Sie Shell-Skripte, um Docker-Dienste stapelweise zu starten und zu stoppen
Inhaltsverzeichnis Starten Sie Docker Stoppen Sie...
12 Gesetze des Webdesigns für sauberen Code [Grafik]
Schöner Code ist die Grundlage einer schönen Websi...
Tutorial zur Installation von MYSQL8.X auf Centos
MySQL-Installation (4, 5, 6 können weggelassen we...
Alibaba Cloud ESC Server Docker-Bereitstellung von Single Node Mysql
1. Laden Sie die beschleunigte Version von msyql ...
Nginx Reverse Proxy Springboot JAR-Paket-Prozessanalyse
Die übliche Methode zum Bereitstellen eines Sprin...
Detailliertes Tutorial zur Installation verschiedener (zwei) Versionen der MySQL-Datenbank unter Windows
1. Ursache: Ich muss eine SQL-Datei importieren, ...
HTML zeigt Auslassungspunkte hinter dem Text an... implementiert durch Textüberlauf
Sie müssen CSS gleichzeitig auf Div oder Span anwe...