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
Linux Überprüfen Sie den Installationsort der Software einfache Methode
1. Überprüfen Sie den Installationspfad der Softw...
Detaillierte Erklärung zur Installation von CentOS7 mit der in Win10 integrierten virtuellen Maschine Hyper-V
1. Installieren Sie die virtuelle Maschine Hyper-...
MySQL-Beispiel-Tutorial: Ergebnisse auswählen, um ein Update durchzuführen
1. Einzelne Tabellenabfrage -> Update UPDATE T...
Die Lösung für das Problem, dass die Webtabelle oder die Div-Ebene in der Webseite gestreckt ist
<br />Beim Gestalten von Webseiten stoßen wi...
Ausführliche Erläuterung der Konzepte und Verwendung von MySQL-Transaktionen
Inhaltsverzeichnis Der Begriff der Affären Der St...
Eine kurze Diskussion über die Docker-Compose-Netzwerkeinstellungen
Tutorial zur Netzwerknutzung Offizielle Website d...
Detaillierte Erläuterung verschiedener Möglichkeiten zum Exportieren von Daten in Mysql
Es gibt viele Gründe für den Export von MySQL-Dat...
Installationsschritte von MySQL unter Linux
1. Laden Sie die MySQL-Tar-Datei herunter: https:...
Galeriefunktion durch natives Js implementiert
Inhaltsverzeichnis Der erste Der Zweite Native Js...
Die Verwendung und der Unterschied zwischen JavaScript-Pseudo-Array und Array
Pseudo-Arrays und Arrays In JavaScript sind mit A...
Detaillierte Analyse mehrerer Situationen, in denen MySQL-Indizes fehlschlagen
1. Führende Fuzzy-Abfragen können keinen Index ve...
Reines CSS zum Erreichen einer einzelnen Div-Transformation eines regulären Polygons
Im vorherigen Artikel haben wir vorgestellt, wie ...
Implementierung der Nginx-Konfiguration für den Multi-Port- und Multi-Domain-Name-Zugriff
Um mehrere Sites auf einem Server bereitzustellen...
Vollständiger Prozessbericht der Nginx-Reverse-Proxy-Konfiguration
1. Vorbereitung Installieren Sie Tomcat auf dem L...
So ändern Sie MySQL, um Remoteverbindungen zuzulassen
In Bezug auf die MySQL-Remoteverbindung stoßen wi...