Was ist Iconfont? Zusammenfassung der Verwendung von Iconfont-Instanzen in CSS

SymbolWas ist Schriftart?

Was ist Iconfont? Zusammenfassung der Verwendung von Iconfont-Instanzen in CSS dürfte heute eine relativ ausgereifte Technologie sein. Wenn IconFont aufgeschlüsselt ist, sollte es wohl jeder verstehen, was es ist, wenn man die beiden kombiniert. Das ist richtig, es ist IconFont ~. Verwenden Sie Schriftarten-Tools, um die Grafiksymbole (Icons), die wir normalerweise im Web verwenden, in Web-Schriftarten umzuwandeln, die zu Symbolschriftarten werden. Sie können mit Hilfe von CSS @font-face in Webseiten eingebettet werden, um Symbole anzuzeigen. Da es sich bei Schriftarten um Vektorgrafiken handelt, sind sie von Natur aus „auflösungsunabhängig“ und können bei jeder Auflösung und PPI perfekt skaliert werden. Sie werden nach der Vergrößerung nicht wie herkömmliche Bitmaps oder Unschärfen angezeigt. Im folgenden Artikel geht es um die Verwendung von Iconfont-Beispielen.

Iconfont-Instanzverwendung

1. Was ist Iconfont? Vorstellung der Vorteile und Einsatzmöglichkeiten von Iconfont

Was sind die Vorteile von Iconfont?

Größe frei ändern

Farbe frei ändern

Sie können einige visuelle Effekte hinzufügen, wie zum Beispiel: Schatten, Drehung, Transparenz.

Kompatibel mit IE6

Die oben genannten Punkte machen das ursprüngliche Symbol völlig zunichte. Der Nachteil ist, dass die Farbe zu eintönig und einfarbig ist.

Das Bild unten ist Teil des Inhalts in der CSS-Datei von „font-awesome“. Vom Namen her sieht es aus wie die Definition von „icon“, aber was genau sind die Inhalte von „f002“ und „f003“? Sie werden verstehen, nachdem Sie die heruntergeladene Schriftartendatei mit einer Schriftartenbearbeitungssoftware geöffnet haben.

2.

Detaillierte Erklärung der Iconfont-Schriftsymbole und verschiedener kleiner CSS-Symbole

Normalerweise setzen wir diese Grafiken werden in Sprite-Diagramme (auch Sprite-Diagramme genannt) geschnitten;

Das Prinzip von Sprite-Diagrammen: Kombinieren Sie viele kleine Bilder zu einem großen Bild und zeigen Sie das Bild dann an, indem Sie die Position des Hintergrundbilds festlegen >

Vorteile von Sprites: Reduzieren Sie die Anzahl der Serveranfragen und verringern Sie den Serverdruck.

Sprites sind ein gutes Werkzeug zum Erstellen von Sprites.

Natürlich gibt es andere Möglichkeiten, sie zu erstellen Kleine Grafiken, wie das von Tmall im Bild verwendete Font-Icon, sind, wie der Name schon sagt, eine Vektorschrift Das Symbol kann beliebig vergrößert werden. Egal wie klein es ist, es kommt zu keiner Verzerrung.

Detaillierte Erläuterung der Verwendung von Iconfont in CSS Auch wenn wir dieses Englisch zunächst nicht verstehen und nicht verstehen, was es bewirkt, sollte Was ist Iconfont? Zusammenfassung der Verwendung von Iconfont-Instanzen in CSS, wenn man es auf Englisch von hinten nach vorne liest, heißen: Font Icon. Darin sind bereits zwei Konzepte enthalten, erstens muss es die Schriftart sein und zweitens muss es das Symbol sein. Wir alle wissen, dass wir die Größe, den Stil, die Verformung, die Dehnung, die Standardschriftart und andere Attribute von Schriftarten auf Webseiten steuern können. Daher muss diese Symbolschriftart als Text in den Stil eingebettet sein, sodass die Schriftart, die uns in den Sinn kommt, seitdem sein muss Es ist ein Symbol, es muss Es gibt einen Pfad, um es einzuführen. Zuerst haben wir an das img-Tag gedacht. Da es sich sowohl um Text als auch um ein Symbol handelt, fällt uns nur das Attribut @font-facecss3 ein.

4.

Was ist Iconfont? Zusammenfassung der Verwendung von Iconfont-Instanzen in CSS-Verwendung von Vektorsymbolschriftarten

Die Verwendung von Symbolschriftarten zum Generieren von Symbolen hat gegenüber bildbasierten Symbolen die folgenden Vorteile: 1.) Frei Ändern Sie die Größe

2.) Ändern Sie die Farbe frei

3.) Fügen Sie einen Schatteneffekt hinzu

4.) IE6 kann auch unterstützen

5.) Unterstützt andere Attribute von Bildsymbolen, wie z. B. Transparenz und Drehung usw.6.) Sie können Attribute wie Textstrich und Hintergrundclip:Text hinzufügen, sofern der Browser dies unterstützt

5

Icon-Schriftarten (IconFont) werden mittlerweile immer häufiger verwendet, was die Vielfalt von Webseiten erheblich verbessert und das Problem der Netzhaut-Bildschirmverzerrung löst. Es heißt, dass diese private Methode (@font-face) von Microsoft ab IE4 unterstützt wurde. Später führte W3 diese Methode auch in CSS2 ein, sie wurde jedoch später in CSS2.1 gelöscht, was wirklich schade ist. Bis CSS3, als es erneut eingeführt wurde, waren das wirklich gute Nachrichten.

Verwandte Fragen und Antworten

1 Die Verwendung von Alibaba-Iconfont wird in Android WeChat nicht angezeigt und wird unter iOS angezeigt

2. Erweitern Sie Alibabas Iconfont-Schriftartenbibliothek in lokalen Projekten und fügen Sie Icon-Schriftarten hinzu

3.Iconfont-Icon-Produktionsprobleme

[Verwandte Empfehlungen]

1. Kostenloses Tutorial auf der chinesischen PHP-Website: „CSS Online Manual“

2. Kostenloses Video-Tutorial auf der chinesischen PHP-Website: „php.cn Dugu Jiujian (2)-CSS-Video-Tutorial》

Das obige ist der detaillierte Inhalt vonWas ist Iconfont? Zusammenfassung der Verwendung von Iconfont-Instanzen in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!