Emoji rendered in Chrome have different widths than in other browsers

问题

I have a page with an emoji followed by a space and some text. For example, "👥 Friends" (character is "busts in silhouette", U+1F465). In Safari and Firefox on macOS, it renders with a space between the emoji and the following text as expected.

In Chrome, however, the space appears as if it's absent:

If I remove the space, Chrome renders the text overlapping with the emoji. It seems like the width of emojis as rendered in Chrome is less than the actual character width.

Is there any way I can get the desired appearance (a normal-width space) cross browser without resorting to an image or icon font? I've tried messing with some CSS properties like text-rendering without success.

<style>
  .friends { 
    font-family: Helvetica, Arial, sans-serif; 
  }
</style>
<span class="friends">👥 Friends</span>

JSFiddle

回答1:

I had the same issue, and found out that it happened on non-retina screens only.

To fix it, we applied a margin through a media-query like this:

<span class="friends"><span class="emoji">👥</span> Friends</span>

<style>
  @media
  not screen and (min-device-pixel-ratio: 2),
  not screen and (min-resolution: 192dpi) {
    span.emoji {
      margin-right: 5px;
    }
  }
</style>

This is a pretty minimal media-query. You should probably use a more complete one like https://stackoverflow.com/a/31578187/1907212.

回答2:

What I would do is add another span within the .friends span that contains the emoji, have it use a right margin, and not have a space after it:

.friends { 
  font-family: Helvetica, Arial, sans-serif; 
}

.friends span {
  margin-right: 10px;
}

<span class="friends"><span>👥</span>Friends</span>

That way you don't have to worry about space rendering ;)

Hope this helps! :)

来源：https://stackoverflow.com/questions/42016125/emoji-rendered-in-chrome-have-different-widths-than-in-other-browsers

标签

html

css

google-chrome

rendering

emoji