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

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

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

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

有没有什么方法可以获得所需的外观(正常宽度空间)跨浏览器而不诉诸图像或图标字体？我试过搞乱一些CSS属性,比如text-rendering没有成功.

 Friends

的jsfiddle

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

为了解决这个问题,我们margin通过像这样的媒体查询来应用:

 Friends

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