Emoji-Fonts hier im Forum

[Auge]

Hallo

Ich versuche gerade in einem Projekt eine Emoji-Auswahl zu implementieren, die mit der des hiesigen Forums vergleichbar ist. Dabei ist mir in verschiedenen Browsern in verschiedenen Betriebssystemen und damit mit verschiedenen installierten Fonts aufgefallen, dass bei weitem nicht alle Emojis dargestellt werden können.

Mit den selben Browser-OS-Kombinationen wird die Liste der Emojis hier vollständig angezeigt. Daraufhin habe ich mich im hiesigen CSS umgeschaut und die font-family-Definition in meine Testseite eingebaut.

Hier mal als Beispiel der Firefox unter Windows 10.

Die Anzeige in einem anderen Browser (Chrome) oder in Ubuntu-Linux mit Firefox, Chromium oder Vivaldi sind ähnlich aus. Es fehlen, unabhängig vom OS und den mutmaßlich verschiedenen dort installierten Fonts, komischerweise immer die selben Emojis (soweit ich das bei einem schnellen Überbick sehen konnte) und es werden für einzelne Emojis verschiedene Fonts verwendet. Allein in diesem Screenshot sind drei unterscheidliche Fonts zu sehen.

Dann habe ich einen der hier für Emojis definierten Fonts, der unter einer freien Lizenz verfügbar ist (Noto-Color-Emoji), auf einem meiner Ubuntu-Rechner lokal installiert. Aber dennoch wurde die Liste nicht anders angezeigt als zuvor. Erst, als ich den heruntergeladenen Font, nach Woff und Woff2 umgewandelt, in den Testbereich hochgeladen und per @font-face eingebunden hatte, wurde mir die Liste so angezeigt, wie ich es von hier gewohnt bin und erwarte.

Nun ist es so, dass die Font-Dateien als TTF 24MB, als Woff 2.3MB und als Woff2 5.4MB groß sind. TTF fällt flach, weil es nicht mehr nötig ist, dieses Format zu unterstützen, aber auch die Datein in den Woff-Formaten sind mit mehreren MB heftig groß. Dass die Datei im Woff2-Format etwa doppelt so groß ist, wie die im Woff-Format, obwohl die Kompression in Woff2 so viel besser sein soll, als die in Woff, lasse ich dabei mal hingestellt.

Wie ist dieses Feature in diesem Forum technisch konkret umgesetzt? Warum ist hier alles zu sehen, ohne, dass ich in den Developer Tools meines Browsers erkennen kann, dass Fonts per @font-face nachgeladen werden?

Tschö, Auge