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

时间:2017-02-03 03:12:34

标签: html css google-chrome rendering emoji

我有一个带有表情符号的页面,后跟一个空格和一些文字。例如,“朋友”(角色是“半身像”,U + 1F465)。在macOS上的Safari和Firefox中,它会根据预期在表情符号和以下文本之间进行渲染。

但是,在Chrome中,空格似乎不存在:

Screenshot

如果删除空格,Chrome会将文字与表情符号重叠。看起来Chrome中呈现的表情符号宽度小于实际字符宽度。

有什么办法可以在不使用图像或图标字体的情况下获得所需的外观(正常宽度空间)跨浏览器?我已经尝试过使用像text-rendering这样的CSS属性而没有成功。

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

JSFiddle

8 个答案:

答案 0 :(得分:5)

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

要解决此问题,我们通过媒体查询应用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

答案 1 :(得分:4)

这是一个 Chrome 错误(查看详细信息 here

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

答案 2 :(得分:2)

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

答案 3 :(得分:1)

作为 Julien's answer 的替代方案,我们可以“强制”实际表情符号字符的宽度在交叉中相等,而不是有选择地指定 margin-right 来纠正不平衡。使用 letter-spacing 的浏览器方式。

本质上,我们的问题是大多数罗马字母字符的高宽比不是 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

答案 4 :(得分:0)

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

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

.friends span {
  margin-right: 10px;
}
<span class="friends"><span></span>Friends</span>

这样你就不必担心空间渲染;)

希望这有帮助! :)

答案 5 :(得分:0)

从(最新)Chrome 79开始,此问题不再存在。

答案 6 :(得分:0)

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

答案 7 :(得分:-1)

MacOS上的Chrome 83上仍然存在此问题problem

我想我找到了解决方法

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