Webfont -Symbole: Eine Alternative zu Bildern

Seien wir ehrlich: Es ist mühsam, zahlreiche winzige Symbole mit Bildbearbeitungssoftware zu erstellen. Das Verwalten von unzähligen kleinen Dateien oder das Erstellen und Schneiden von Image -Sprites in CSS ergibt eine unnötige Komplexität. Zum Glück bietet HTML5 eine bessere Lösung: Webfonts. Schriftsätze können neben Standardzeichen grafische Symbole enthalten. Während Wingdings ein bekanntes Beispiel ist, bieten kostenlose Optionen wie die ikonische Nützlichkeit und bieten Beispiele für HTML und CSS. Siehe die Webfont -Icon Demo -Seite ...

Konvertieren Sie nach der Auswahl oder Erstellung Ihrer Schriftart in verschiedene Formate, um eine optimale Kompatibilität für Kreuzbrowser zu erhalten. Der @font-Face-Generator von fontsquirrel.com vereinfacht diesen Prozess und bietet eine ZIP-Datei mit allen notwendigen Schriftarten und CSS bereit. Importieren Sie die Schrift in Ihr CSS wie folgt:

@font-face {
    font-family: "IconicStroke";
    src: url("iconic_stroke.eot");
    src: url("iconic_stroke.woff") format("woff"), 
    url("iconic_stroke.ttf") format("truetype"), 
    url("iconic_stroke.otf") format("opentype"), 
    url("iconic_stroke.svg#iconic") format("svg");
}

Während Sie Symbolzeichen in Ihrem HTML (z. B. 'R' für das RSS -Symbol des ikonischen RSS) direkt einfügen, kann dies die Zugänglichkeit des Bildschirmlesers behindern. CSS-Pseudoelemente sind ein integrativerer Ansatz:

Ihr HTML:

<a href="https://www.php.cn/link/50d7f99947b472cc889d58845b9d23e2">RSS Feed</a>

Ihr CSS:

.rss:before {
    font-family: "IconicStroke";
    content: "r";
}

Vorteile der Webfont -Symbole:

• Skalierbarkeit und Anpassung: Größe, rezipieren und wenden Sie CSS -Effekte mühelos an.
• breite Kompatibilität: Ausgezeichnete Cross-Browser-Unterstützung, einschließlich älterer Browser wie IE6.
• Effizienz: Eine einzelne Schriftartdatei übertrifft häufig mehrere Bilddateien in Effizienz.

Nachteile der Webfont -Symbole:

• Einfarbigbeschränkung: Ikonen sind von Natur aus einfarben (obwohl CSS3 dies mildern kann).
• Schriftgenerierungskomplexität: Schriftarten erstellen ist nicht so einfach wie die Erzeugung von PNGs oder SVGs.
• Überlegungen zur Dateigröße: Für eine kleine Anzahl von Symbolen sind Bilddateien möglicherweise kleiner.

Insgesamt bieten Webfont -Symbole erhebliche Vorteile und können die Entwicklungszeit erheblich verkürzen. Haben Sie sie in Ihre Projekte aufgenommen? Siehe die Webfont -Icon Demo -Seite ...

häufig gestellte Fragen:

Der bereitgestellte FAQ-Abschnitt ist bereits gut strukturiert und umfassend. Es sind keine Änderungen erforderlich, um Klarheit und Genauigkeit aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWebfont -Symbole: Eine Alternative zu Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!