So verwenden Sie das CSS-Schriftartsymbol

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.

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";
}

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

<span class="icon-uniE901"></span>

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!