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

[Matthias Scharwies]

Servus!

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.

interessante Sache, die hier in einem Stub beschrieben wird: Zeichencodierung/Emojis_und_Emoticons

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?

Da weiß @Christian Kruse bestimmt mehr.

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

Servus!

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.

interessante Sache, die hier in einem Stub beschrieben wird: Zeichencodierung/Emojis_und_Emoticons

Danke erstmal. Warum nicht alle Emojis angezeigt werden, war mir schon klar. Warum das, unabhängig vom OS nach erstem Augenschein immer die selben sind, nicht. Aber das lasse ich erst einmal stehen. Mir ist halt wichtig, zu erkennen, warum hier alle Emojis angezeigt werden, obwohl ich keine Einbindung eines Fonts per @font-face finde.

Dennoch ist der Artikel interessant, weil er weitere Aspekte anspricht, an die ich bisher nicht gedacht hatte.

Wie ist dieses Feature in diesem Forum technisch konkret umgesetzt?

Da weiß @Christian Kruse bestimmt mehr.

Ja. Mal sehen, ob er sich äußern mag.

Tschö, Auge

[Auge]

Hallo

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?

Sieht aus, als würde hier der Emoji-Picker emoji-mart benutzt. Der Picker, den die auf ihrer Beispielseite benutzen, sieht aus, wie der hiesige. Mit dem Font von Twitter sehen die beiden Picker für mich gar identisch aus.

Tschö, Auge