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

【问题标题】：Emoji rendered in Chrome have different widths than in other browsers在 Chrome 中呈现的表情符号的宽度与在其他浏览器中不同
【发布时间】：2017-06-20 08:17:25
【问题描述】：

我有一个带有表情符号的页面，后跟一个空格和一些文本。例如，“???? Friends”（字符为“半身像剪影”，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

【问题讨论】：

标签： html css google-chrome rendering emoji

【解决方案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。

【讨论】：

我在视网膜屏幕上遇到这个问题，macbook pro 16 inch 2019
@Tom 什么版本的 Chrome，因为这似乎不再存在于 Chrome 79 上
Chrome 79 也在这里
对我来说，它只发生在在视网膜屏幕上

【解决方案2】：

这是一个 Chrome 错误（详见here）

这与在 非视网膜 屏幕上在 Mac Chrome 中显示表情符号有关。我的显示器有一个非视网膜屏幕（间距/光标位置是信息），但在我的 Mac 上绝对没问题。

【讨论】：

该错误已作为 this bug 的副本关闭，截至 2021 年 2 月 12 日，该错误仍处于打开状态。

【解决方案3】：

现在是 2020 年 2 月，这个问题仍然是 very much exists（打开 Chrome 错误的链接）。 2019 年 16 英寸 MacBook Pro 上 MacOS X 10.15.7 上的 Chrome 88.0.4324.150：在内部 Retina 显示器和外部超宽显示器之间拖动浏览器窗口会更改表情符号的呈现。

【讨论】：

【解决方案4】：

我要做的是在包含表情符号的.friends 范围内添加另一个范围，让它使用右边距，并且后面没有空格：

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

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

&lt;span class="friends"&gt;&lt;span&gt;?&lt;/span&gt;Friends&lt;/span&gt;

这样你就不必担心空间渲染；）

希望这会有所帮助！ :)

【讨论】：

【解决方案5】：

为我从 font-family 固定问题中删除 BlinkMacSystemFont，您需要关闭并重新打开选项卡才能看到效果。

【讨论】：

这对我有帮助

【解决方案6】：

作为Julien's answer 的替代方案，我们可以使用@ 以跨浏览器的方式“强制”实际表情符号字符的宽度相等，而不是选择性地指定margin-right 来纠正不平衡。 987654326@.

本质上，我们的问题是大多数使用罗马字母的字符的高宽比不是 1:1，但大多数表情符号（大致）确实具有 1 的高宽比： 1.这是描述我们所看到的表情符号和 ANSI 字符之间的间距的一种方式。

See example screenshot here

letter-spacing 设置文本字符之间的水平间距行为。当与 CSS em 单位配对时，我们可以使用此属性“强制”每个字符/表情符号在大约 1:1 的框中呈现。这可能需要根据您使用的字体或字符集进行调整。

根据下面的资料，一个罗马字符通常大约是它的高度的 0.5 倍，所以我们可以简单地这样做：

span.emoji {
  letter-spacing: 0.5em;
}

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

<style>
  span.emoji {
    letter-spacing: 0.5em;
  }
</style>

这种方法意味着在正确呈现表情符号的浏览器中，我们不会添加额外的margin-right。

【讨论】：

【解决方案7】：

自（最迟）Chrome 79 起，此问题不再存在。

【讨论】：

在 MacOS 上的 Chrome 79 上我仍然会发生这种情况
查看我在 2021-02-13 的评论：在这个问题上仍有一个未解决的错误。

【解决方案8】：

MacOS 上的 Chrome 83 上仍然存在这个问题?

我想我找到了解决办法

[data-emoji] {
  font-style: normal;
  font-weight: normal;
}
[data-emoji]:before {
  content: attr(data-emoji);
  margin-right: .125em;
}

【讨论】：