Unicode Character an Stelle von Grafiken verwenden

Die Aufgabenstellung:

Ein Symbol soll so in eine Webseite eingebunden werden, dass es wie Schrift mittels CSS gestyled werden kann.

Beispiel:

⏻ … Ausschalten!

Das obige Symbol ist keine Grafik, sondern das UTF8-Zeichen U+23FB POWER SYMBOL

<p><span style="font-size:1.5em;position:relative;top: 3px;">&#x23FB;</span> … Ausschalten!
Das Problem: Unter Windows wird das Zeichen wahrscheinlich nicht korrekt gerendert, weil es in keinem unter Windows standardmäßig installierten Font enthalten ist. Ohne weiteres wird unter Windows nur ein Rechteck als Platzhalter angezeigt, etwa wie folgt:

▯ … Ausschalten!

Die Lösung

Es wird ein Webfont installiert, der das Zeichen enthält, bzw. ein Webfont-Subset, der nur das eine Zeichen enthält. Klingt aufwändig, ist aber keine große Sache, wenn man weiß wie.

1. Hier das Tool, das bei der Suche nach einem passenden Font hilft: fontspace.com/unicode/chars
2. Dort als Filter eingeben z.B.: Power, dann findet man in der Liste auch U+23FB POWER SYMBOL
3. Ein Klick führt zu fontspace.com/unicode/char/23FB-power-symbol
4. Dort findet man 13 Fonts that include POWER SYMBOL
5. Ich habe mich für Wigners Friend entschieden. Ein Klick darauf öffnet die Seite mit dem Download des Fonts.
6. Die Fontdatei WignersFriendRoman-1GY8e.ttf ist mit 123 kB natürlich viel zu groß, um sie nur wegen eines einzigen Zeichens zu verwenden.
   Aber es gibt einen Trick: Ein Webfont-Subset erstellen. Hier gibt es die ausführliche Anleitung. Die solchermaßen "geschrumpfte" Webfont-Subset-Datei ist nur noch 5 kB leicht, und damit nicht größer als eine entsprechende Grafik.

Der Einsatz des Webfont-Subsets:

<style> @font-face { font-family: 'wigners_friendroman'; src: url('fonts/wignersfriendroman-1gy8e-webfont.woff2') format('woff2'), url('fonts/wignersfriendroman-1gy8e-webfont.woff') format('woff'); } </style> ... ... <p><span style="font-family:wigners_friendroman;font-size:1.8em;position: relative;top: 3px;">&#x23FB;</span> … Ausschalten! In Zwischenablage kopieren

Fazit

Jetzt wird das Symbol in jedem Browser und jedem Betriebssystem korrekt dargestellt.

⏻ … Ausschalten!

Sinn macht diese Technik natürlich nur, wenn man, wie z.B. im Chat, das gleiche Zeichen in mehreren verschiedenen Styles verwenden will, und das Zeichen sich mittels CSS nahtlos ins Schrift-Styling einfügen soll.

Artikeltexte und Code-Snippets: Creative Commons CC BY-SA 4.0
Medien (Bilder, Videos, Audios) sind evtl. urheberrechtlich geschützt.