Ausführliche Erläuterung der Verwendung von Iconfont in CSS

Dieses Tutorial erklärt ausführlich die Verwendung von Iconfont in CSS

Erste Einführung in Iconfont

Auch wenn wir dieses Englisch zunächst nicht verstehen und nicht verstehen, wozu es dient , für iconfont, das Englische ist von hinten nach vorne. Die Lesung sollte heißen: Schriftartsymbol. 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.

Es gibt auch das spätere Wort „Iconfont“, das am Anfang nicht vorkam. Es handelt sich um eine Präsentationsebene, die von Webseitenerstellern oder Wissenschaftlern bereitgestellt wird, die es angenehmer klingen lassen möchten.

Wenn wir also Alibabas Iconfont-Icon-Tutorial sehen, sieht es wie folgt aus:

Schritt 1: Verwenden Sie „font-face“, um die Schriftart zu deklarieren

@font-face {font-family : 'iconfont';
src: url('iconfont.eot'); /* IE9*/
src: url('iconfont.eot?#iefix') format('embedded-opentype'), / * IE6-IE8 */
url('iconfont.woff') format('woff'), /* chrome, firefox */
url('iconfont.ttf') format('truetype'), / * Chrome, Firefox, Opera, Safari, Android, iOS 4.2+*/
url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

Schritt 2: Definieren Sie den Stil mit iconfont

.iconfont{
Schriftfamilie: "iconfont" !important;
Schriftgröße:16px;Schriftstil: normal ;
-webkit-font-smoothing: antialiased;
-webkit-text-Stroke-width: 0.2px;🎜>
Schritt 3: Wählen Sie das entsprechende Symbol aus, rufen Sie die Schriftartenkodierung ab und wenden Sie sie auf die Seite an

#x33

Der Effekt ist wie folgt

Iconfont hat jedoch einige Nachteile:

Der Browser behandelt es zur Anti-Aliasing-Optimierung als Text und manchmal ist der Effekt nicht so scharf wie gedacht. Insbesondere können unterschiedliche Anti-Aliasing-Algorithmen für Text unter verschiedenen Systemen zu unterschiedlichen Anzeigeeffekten führen.

Symbolschriftart Als Schriftart können Größe und Position der Symbolanzeige durch CSS-Eigenschaften wie Schriftgröße, Zeilenhöhe, Wortabstand usw. beeinflusst werden. Der CSS-Stil des Containers, in dem sich das Symbol befindet, kann sich auf die Position des Symbols auswirken und die Anpassung erschweren.

Es gibt Unannehmlichkeiten bei der Verwendung. Erstens verschwendet das Laden einer Symbolschriftart, die Hunderte von Symbolen enthält, von denen aber nur wenige verwendet werden, Ladezeit. Es ist auch sehr umständlich, wenn Sie Ihre eigene Icon-Schriftart erstellen und die in mehreren Icon-Schriftarten verwendeten Symbole in eine Schriftart integrieren. Natürlich kann die Verwendung der Alibaba UX-Vektorsymbolbibliothek dieses Problem lösen.

Um eine maximale Browserunterstützung zu erreichen, können mindestens vier verschiedene Arten von Schriftartdateien bereitgestellt werden. Enthält TTF, WOFF, EOT und eine im SVG-Format definierte Schriftart. Wenn Sie es selbst erstellen, können Sie Kopfschmerzen haben

Das Obige ist eine detaillierte Erklärung der Verwendung von Iconfont in CSS. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (m.sbmmt.com). )!