96 Aufrufe
Gefragt in Webseiten HTML von xlking Experte (1.8k Punkte)

Ein Herzliches Hallo in die Runde. Hab auch mal wieder eine Frage:

Warum werden Unicode-Zeichen in verschiedenen Webseiten unterschiedlich dargestellt? z.B. das Zeichen 1F60D.

Auf https://symbl.cc/de/unicode-table/#emoticons ist es ein ganz normales schwarzweißes Schriftzeichen:

Unicodezeichen 1F60D_1

Auf https://symbl.cc/de/emoji/smileys-and-emotion/ ist es ein richtiges Emoticon: gelb mit roten Herzaugen.

Unicodezeichen 1F60D_2

Wenn ich das Zeichen als Code in meine HTML-Seite einfüge ist es auch ein Emoticon, sieht aber völlig anders aus. Der Mund ist offener und die Herzaugen sind jetzt pink und gehen über den Rand hinaus.

Unicodezeichen 1F60D_3

Und hier im Supportnet? Mal sehen:

😍

Alle drei Bilder wurden dargestellt mit Google-Chrome, wobei die dritte Variante in der Standardschriftart erfolgt ist.

Wie muss ich mein CSS stylen, dass ich auf das erste und zweite Ergebnis komme? Hängt das vom Font ab?

Gruß Mr. K.

5 Antworten

0 Punkte
Beantwortet von computerschrat Profi (33k Punkte)
Hallo Mr. K.,

der Unterschied scheint die font-family zu sein. Ich habe mit mal den Quelltext zu der ersten verlinkten Seite mit den S/W Schriftzeichen angesehen. Dort ist im CSS gesetzt:

font-family: u1f400;

Wenn ich dieses deaktiviere, wird das Gesicht mit den riesigen Herzen angezeigt. Also solltest du mal mit der font-family spielen.

Auf der zweiten von dir verlinkten Seite sind, soweit ich sehe, die Zeichen als Grafik eingefügt. Da hat die font-family keine Wirkung.

Gruß computerschrat
0 Punkte
Beantwortet von computerschrat Profi (33k Punkte)
Nochmal Hallo Mr. K.,

ich habe mal etwas gespielt. Mit font family konnte ich keine Änderung erreichen. Es blieb immer bei den übergroßen Herzen im Gesicht. Wenn ich aber im CSS die Eigenschaft font-variant-emoji auf text setze, dann bekomme ich das S/W Emoticon angezeigt.

Allerdings nur im Chrome. Im Firefox bleibt es bei allen meinen Versuchen bei den großen Herzen.

Gruß computerschrat
0 Punkte
Beantwortet von computerschrat Profi (33k Punkte)

So sieht mein Testfile aus:

<style>
.a {
  font-variant-emoji: text;
}

.b {
  font-variant-emoji: normal;
}
</style>

Standard :
&#x1f60d;
&#x1F600;
<br>

<div class="a">
 font-variant-emoji text
&#x1f60d;
&#x1F600;
<br>
</div>

<div class="b">
 font-variant-emoji normal
&#x1f60d;
&#x1F600;
<br>

0 Punkte
Beantwortet von xlking Experte (1.8k Punkte)
Hallo Computerschrat, danke für deine Antwort. Auch wenn sie mir bislang nur bedingt hilft. Es gibt eine Eigenschaft Font-Variant-Emoji? Das ist ja interessant. Damit muss ich mich mal genauer beschäftigen. Ich habe inzwischen herausgefunden, dass es offenbar Unicode-Steuerzeichen gibt, mit denen man z.B. Buchstaben verbinden oder ihnen einen Überstrich bzw. Überpunkte zuweisen kann. Mit dem Steuerzeichen &#xFE0E; kann man bunte Unicode-Zeichen in Text umwandeln, wenn man es direkt hinter das darzustellende Zeichen setzt. Aber ich mache so was lieber über CSS, da ist dein Tipp doch viel besser.

Allerdings sieht das Textzeichen ebenfalls anders aus, als das auf der Website (Bild1 meiner Frage). Die Augen sind weiter auseinander und der Mund ist nicht so breit. Das muss doch was zu bedeuten haben. Hmm.

Und eigentlich geht es mir nicht so sehr um die Emojis, sondern um die unterschiedliche Darstellung bestimmter Unicode-Zeichen. Wenn du in der Suchmaschine mal nach 1F60D suchst bekommst du verschiedenste Zeichnungen dieses Emojis. So ist es auch bei anderen Zeichen. Ich frage mich daher, ob es wirklich Bilder sind, oder ob man das irgendwie über den Font steuern kann.

Ich werde weiter probieren. Falls du oder jemand anderes hier noch einen Tipp habt, wäre ich euch sehr verbunden.

Gruß Mr. k.
0 Punkte
Beantwortet von computerschrat Profi (33k Punkte)

Hallo Mr.k.,

bei deiner vorgeschlagenen Suche nach 1F60D bin ich auf diese Seite gestoßen: https://symbl.cc/de/1F60D/

Da heißt es sogar, dass das Zeichen (und vermutlich andere Zeichen ebenso) in unterschiedlichen Betriebssystemen und auch Anwendungen unterschiedlich dargestellt wird. Das ist schon etwas merkwürdig.

Gruß computerschrat

...