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

Question

我有一个带有表情符号的页面,后跟一个空格和一些文本.例如,"朋友"(角色是"半身像",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>

这是一个非常小的媒体查询.你可能应该使用更完整的一个,如/sf/answers/2210473121/.

Answer 2

这是一个 Chrome 错误（请参阅此处的详细信息）

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

Answer 3

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

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

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

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

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

希望这可以帮助！:)