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
Einfache Implementierung zum Ignorieren von Fremdschlüsseleinschränkungen beim Löschen von MySQL-Tabellen
Das Löschen einer Tabelle kommt nicht sehr häufig...
Exquisiter Snake-Implementierungsprozess in JavaScript
Inhaltsverzeichnis 1. HTML-Struktur erstellen 2. ...
Fallstudie zur Implementierung eines jQuery Ajax-Chatbots
Chatbots können viel manuelle Arbeit sparen und i...
Detaillierte Erläuterung des geplanten Ausführungsbefehls von Crontab unter Linux
Unter LINUX werden periodische Aufgaben normalerw...
So reduzieren Sie den Speicherverbrauch und die CPU-Auslastung von Webseiten
Manche Webseiten erscheinen möglicherweise nicht ...
Warum der Speicherplatz nach dem Löschen von Daten in MySQL nicht freigegeben wird
Inhaltsverzeichnis Problembeschreibung Lösung Pro...
Vue-Formular-Post-Anforderung kombiniert mit Servlet zur Realisierung der Datei-Upload-Funktion
Code der Front-End-Testseite: <Vorlage> <...
Informationen zur Installation des Python3.8-Images im Docker
Offizielle Docker Hub-Website 1. Suchen Sie nach ...
Detaillierte Erklärung der HTML-Programmier-Tags und der Dokumentstruktur
Der Zweck der Verwendung von HTML zum Markieren v...
So ändern Sie das Terminal in Ubuntu 18 in eine schöne Eingabeaufforderung
Ich habe VMware und Ubuntu neu installiert, aber ...
Prozessanalyse von reservierten Wortanweisungen in Dockerfile
Inhaltsverzeichnis 1. Was ist Dockerfile? 2. Anal...
Detaillierte Erläuterung der CentOS-Konfiguration der offiziellen Nginx-Yum-Quelle
Ich habe das von Alibaba Cloud gekaufte CentOS fü...
idea verwendet Docker-Plugin, um automatisierte Bereitstellung mit einem Klick zu erreichen
Inhaltsverzeichnis Umfeld: 1. Docker ermöglicht d...
So aktivieren Sie Flash in Windows Server 2016
Ich habe vor Kurzem VMware Horizon bereitgestellt...
HTML-Tutorial, HTML-Standardstil
html , Adresse , Blockzitat , Text , dd , div , d...