html - 在 Chrome 中呈现的表情符号与在其他浏览器中呈现的宽度不同

Question

我有一个页面，上面有一个表情符号，后面跟着一个空格和一些文本。例如，“👥 Friends”( Angular 色为“半身剪影”，U+1F465)。在 macOS 上的 Safari 和 Firefox 中，它会按预期在表情符号和以下文本之间呈现一个空格。

然而，在 Chrome 中，空格看起来好像不存在一样:

如果我删除空格，Chrome 会呈现与表情符号重叠的文本。 Chrome 中呈现的表情符号宽度似乎小于实际字符宽度。

有什么方法可以在不借助图像或图标字体的情况下跨浏览器获得所需的外观(正常宽度的空间)？我试过弄乱一些 CSS 属性，例如 text-rendering 但没有成功。

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

JSFiddle

Answer 1

我遇到了同样的问题，并发现它只发生在非视网膜屏幕上。

为了修复它，我们通过这样的媒体查询应用了 margin:

<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>

这是一个非常简单的媒体查询。您可能应该使用更完整的一个，例如 https://stackoverflow.com/a/31578187/1907212 .