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

Question

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

htmlcssgoogle-chromerenderingemoji

31

我有一个页面，其中包含一个表情符号，后跟一个空格和一些文本。例如，“ 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

- Harrison Liddiard

8个回答

5

这是一个Chrome的bug （详见此处）。

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

- emmas

1

该错误已被关闭，作为此错误的重复，截至2021年2月12日，此错误仍然未解决。 - Dave Land

3

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

本质上，我们的问题是大多数罗马字母字符的高度与宽度比不是1:1，但大多数表情符号（大致）确实具有高度与宽度比1:1。这是描述我们在表情符号和ANSI字符之间看到的间距的一种方式。 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。

- Austin Jackson

2

现在是2020年2月，这个问题仍然存在（打开Chrome bug的链接）。在MacOS X 10.15.7上使用Chrome 88.0.4324.150，连接一个2019年的16英寸MacBook Pro和一个外部的超宽显示器，拖动浏览器窗口会改变表情符号的呈现方式。

- Dave Land

1

我会在包含表情符号的.friends span内添加另一个，并将其使用右边距，并且不要在其后面添加空格：

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

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

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

那样你就不必担心空格的呈现方式了 ;) 希望这可以帮到你! :)

- Obsidian Age

1

从字体族中移除BlinkMacSystemFont对我有帮助，你需要关闭并重新打开标签才能看到效果。

- Sebastian Podgajny

-1

截至最新的Chrome 79版本，这个问题已经不存在了。

- LTPCGO

5

我在 MacOS 上使用 Chrome 79 仍然会遇到这个问题。 - Tom

请查看我于2021年02月13日的评论：这个问题仍然存在未解决的错误。 - Dave Land

-1

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

我想我找到了解决方案

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

- Julian Stark

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Julien Ma · Accepted Answer

我遇到了同样的问题，后来发现这只会在< strong >非Retina屏幕上发生。

为了解决这个问题，我们通过类似于下面的媒体查询应用了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://dev59.com/co3da4cB1Zd3GeqPyE43#31578187。