Symbolschriftarten: Wie funktionieren sie?

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!

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:

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

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).

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 .