Explain why Chrome interprets Arial emojis differently than in any other font - it adds a gender symbol

问题

Could someone explain why some emoji have the gender symbol added to them when using Chrome and an Arial font? Arial facepalm renders with gender symbol in Chrome

chrome version: 63.0.3239.132

Here's the html

<!DOCTYPE html>
<html>
<style> 
.emoji {
  font-family: Times;
}
</style>
<body>

<p style="font-family: Arial">Arial Facepalm with symbol 🤦‍♂️</p>
<p style="font-family: Arial">Arial Facepalm without symbol 🤦‍️</p>
<p class=emoji>Times Facepalm with symbol 🤦‍♂️‍</p>
<p class=emoji>Times Facepalm without symbol 🤦‍</p>
<p>No font Facepalm with symbol 🤦‍♂️</p>
<p>No font Facepalm without symbol 🤦‍</p>

</body>
</html>

回答1:

I assume you selected the emoji from an Apple device interface, because the gender symbol is inherent in the string that gets pasted. It's actually four Unicode characters:

A generic facepalm character: U+1F926 🤦
A zero width joiner: U+200D‍ (the glue)
A male gender symbol: U+2642♂ (the default)
A variation selector: U+FE0F️ (seems redundant)

Replace the gender with a female sign and you've got a "woman face palm"

&#x1F926;&zwj;&#x2640;

Example: https://codepen.io/anon/pen/RQQvPW

But as you've spotted - not with Arial in Chrome - and apparently only Arial and only Chrome from what I've tested.

Although I can answer why the symbol is there, I can't tell you why Chrome can't render the Unicode composite rules in just this font. I can only guess that it's a bug in Chrome and will be fixed at some point.

If you need to render a male face palm in Arial you still can. Just use the generic base character on its own: 🤦. If you need a female emoji then you're stuck.

来源：https://stackoverflow.com/questions/48757153/explain-why-chrome-interprets-arial-emojis-differently-than-in-any-other-font

标签

google-chrome

emoji

font-family