Symbolschriftarten: Wie funktionieren sie?

86

Ich verstehe, dass Symbolschriftarten nur Schriftarten sind und dass Sie die Symbole erhalten können, indem Sie einfach ihren Klassennamen aufrufen. Aber wie funktionieren Symbolschriftarten ?

Ich habe versucht, die in Chrome geladenen Ressourcen für zugehörige Symbolschriftarten zu überprüfen, um festzustellen, wie Symbolschriftarten Symbole anzeigen (im Vergleich zu allgemeinen Schriftarten), konnte jedoch nicht herausfinden, wie dies geschieht.

Es ist mir auch nicht gelungen, Ressourcen zu finden, wie diese "Symbolschrifttechnik" durchgeführt wird, obwohl eine Vielzahl von Symbolschriftarten verfügbar sind . Es gibt auch viele Ressourcen, die zeigen, wie Symbolschriftarten integriert werden können , aber niemand scheint zu teilen oder darüber zu schreiben, wie dies gemacht wird!

css web fonts icons icon-fonts Vivek Chandra
quelle

Antworten:

53

Glyphicons sind Bilder und keine Schrift. Alle Symbole befinden sich in einem Sprite-Bild (auch als Einzelbilder verfügbar) und werden den Elementen wie folgt hinzugefügt backround-image:

Glyphicons

Bei tatsächlichen Schriftartensymbolen ( z. B. FontAwesome ) muss eine bestimmte Schriftart heruntergeladen und die contentEigenschaft verwendet werden, z. B.:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Da die contentEigenschaft nicht unterstützt wird in älteren Browsern, diese auch nutzen Bilder .

Hier ist ein Beispiel für vollständig rohes FontAwesome, das als Schriftart verwendet wird und sich in einen Krankenwagen verwandelt ( - das können Sie möglicherweise nicht sehen!): Http://jsfiddle.net/GWqcF/2

James Donnelly
quelle
4
FontAwesome-Symbole sind Schriftarten. Ich habe sogar FontAwesome in meiner Antwort erwähnt und weiter ausgeführt, wie sie mit Browsern umgehen, die ihre CSS-Methode zum Hinzufügen der Symbole zur Seite nicht unterstützen.
James Donnelly
3
Die Symbole sind die Zeichen der Schriftart. Als grobes Beispiel: Der Buchstabe "Z" könnte so gestaltet sein, dass er wie ein Koffer aussieht, als Schriftart gespeichert und dann auf einer Website verwendet wird.
James Donnelly
1
Hier ist ein Beispiel für einen völlig rohen FontAwesome, der sich in einen Krankenwagen verwandelt
James Donnelly
6
@VivekChandra ja das stimmt! :-) Symbolschriftarten sind wie jede andere Schriftart, nur dass die Zeichen so gestaltet sind, dass sie wie Symbole aussehen. FontAwesome verwendet eine Reihe von Zeichen, die für den "privaten Gebrauch" reserviert sind .
James Donnelly
1
Genial. Vielen Dank für alle Ressourcen - wir werden uns darum kümmern, die Dinge sind jetzt klarer.
Vivek Chandra
22

Wenn Ihre Frage lautet, wie eine CSS-Klasse ein bestimmtes Zeichen einfügen kann (das in der speziellen Schriftart als Symbol gerendert wird), schauen Sie sich die Quelle für FontAwesome an :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Daher wird eine CSS-Inhaltsanweisung verwendet, um das Zeichen einzufügen (das aus einem speziellen reservierten Bereich für den privaten Gebrauch von Unicode stammt, der andere Leser nicht durcheinander bringt).

Thilo
quelle
2
Was bedeutet der Schrägstrich f?
CodyBugstein
5
Das fist nicht Teil davon, es ist nur die Hexadezimalzahl 15. Der Backslash startet die Escape-Sequenz für einen hexadezimalen Codepunkt. \f004in CSS ist wie in HTML.
Thilo
10

Wie funktionieren Webfont-Symbole?

Web-Fonts-Symbole verwenden CSS, um mithilfe der content-Eigenschaft eine bestimmte Glyphe in den HTML-Code einzufügen. Anschließend wird @font-faceein Dingbat-Webfont geladen, der die injizierte Glyphe formatiert. Das Ergebnis ist, dass das injizierte Symbol zum gewünschten Symbol wird.

Zu Beginn benötigen Sie eine Web-Schriftartdatei mit den Symbolen, die Sie benötigen, entweder für bestimmte ASCIIZeichen (A, B, C, !, @, #, etc.)oder im Bereich für den privaten Gebrauch der Unicode-Schriftart. Hierbei handelt es sich um Leerzeichen in der Schriftart, die von bestimmten Zeichen in a nicht verwendet werden Unicode-codierte Schriftart.

Weitere Informationen zum Erstellen von Webfont-Symbolen finden Sie unter Responsive Webfont-Symbole .

artamonovdev
quelle