小编Har*_*ard的帖子

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