Heim > Web-Frontend > CSS-Tutorial > Hauptteil

So verwenden Sie das CSS-Schriftartsymbol

醉折花枝作酒筹
Freigeben: 2023-01-07 11:45:42
Original
3865 Leute haben es durchsucht

In CSS können Sie nach der Einführung der Schriftarten und style.css-Dateien Inline-Tags verwenden, um Schriftartensymbole hinzuzufügen. Das Syntaxformat ist „“. Die Farbe und Größe des Schriftsymbols kann über das entsprechende CSS geändert werden. Die Datei ist relativ klein, was der Seite hilft, HTTP-Anfragen zu reduzieren.

So verwenden Sie das CSS-Schriftartsymbol

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Online generieren

über die Website https://icomoon.io/app/#/select. Natürlich gibt es noch andere ähnliche Websites, aber diese ist wirklich großartig, großartig, großartig, dreimal.

Importieren Sie alle Symbole im SVG-Format, wählen Sie sie alle aus und klicken Sie auf „GenerateFont“, um die entsprechenden Schriftartsymbole zu generieren. Laden Sie dann alle gepackten Dateien herunter.

Die Seite verweist auf das entsprechende Schriftartensymbol

Die Verzeichnisstruktur der heruntergeladenen Paketdatei ist wie im Bild oben gezeigt. Wir müssen nur die Schriftarten und style.css-Dateien vorstellen. Die Schriftartendatei lautet wie folgt: EOT-komprimierte Schriftartenbibliothek, integriertes SVG-Symbol, TTF-Schriftart und WOFF-Schriftartformat.


style.css enthält die Einführung der Schriftartendatei und den Stil des entsprechenden Symbols.

@font-face {
    font-family: 'icomoon';
    src:    url('fonts/icomoon.eot?n54c0o');
    src:    url('fonts/icomoon.eot?n54c0o#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?n54c0o') format('truetype'),
        url('fonts/icomoon.woff?n54c0o') format('woff'),
        url('fonts/icomoon.svg?n54c0o#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;
}

.icon-uniE900:before {
    content: "\e900";
}
.icon-uniE901:before {
    content: "\e901";
}
.icon-uniE902:before {
    content: "\e902";
}
.icon-uniE903:before {
    content: "\e903";
}
.icon-uniE904:before {
    content: "\e904";
}
.icon-uniE905:before {
    content: "\e905";
}
Nach dem Login kopieren

Wir können das obige Stylesheet ändern, um den besten Effekt unserer eigenen Seitenanzeige zu erzielen.

<span class="icon-uniE901"></span>
Nach dem Login kopieren

Welches Symbol wird benötigt? Wir müssen nur die entsprechende Klasse zu einem Inline-Tag hinzufügen (span, i, em).

Zusammenfassung

Die Verwendung von Schriftartsymbolen ist sehr praktisch, und Farbe und Größe können über das entsprechende CSS geändert werden. Darüber hinaus ist die Datei relativ klein, was sich positiv auf das Laden der Seite auswirkt und HTTP-Anfragen reduziert.

Aber wenn eine Schriftartensymboldatei generiert wurde und wir neue Symbole hinzufügen müssen, müssen wir die entsprechende Schriftartendatei neu generieren und die CSS-Datei ändern. Die Lösung besteht darin, möglichst alle verwendeten Symbole vor der Generierung hinzuzufügen oder eine Schriftarten-Symbolbibliothek eines Drittanbieters zu verwenden.

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Schriftartsymbol. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage