css - 有没有办法标准化表情符号的大小和宽度？

Question

此特定示例的 2 个问题:

不同的表情符号有不同的水平“空白”，这意味着如果我添加 margin-right要将宽表情符号与数字分开，一些表情符号具有自然的“空白”，并且空间变得异常大

MacBook 2880x1800(15.4 英寸)和外接 2560x1440(27 英寸)显示器上的表情符号大小与除此之外的数字相比有很大不同 - 出于某种原因，外接显示器上的表情符号要大得多

有没有办法使这些问题(尤其是第二个问题)正常化？
附注! 我知道使用图像表情符号作为解决这些问题的技巧，但这个问题是关于原生表情符号的。
截图

MacBook 显示屏

外接显示器

.item {
  font-family: Arial;
  background: #eee;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 15px;
  font-size: 1em;
  margin-right: 10px;
}
.emoji {
  margin-right: 5px;
  line-height: 100%;
}

<div id="emojis">
  <div class="item">
    <span class="emoji">❓</span>
    <span>123</span>
  </div>

  <div class="item">
    <span class="emoji">⁉️</span>
    <span>4</span>
  </div>
  
    <div class="item">
    <span class="emoji">🤔</span>
    <span>732</span>
  </div>
</div>

Answer 1

用十六进制代码编写表情符号是否有助于它们在两个显示器上保持相同的大小？

<span class="emoji">&#10067</span>
<span class="emoji">&#x203D</span>
<span class="emoji">&#129300</span>

我在想 Macbook 上的 Retina 显示器，以不同的方式显示像素(每像素双像素)，有时会导致问题，尤其是在表情符号上。也许为视网膜显示改变表情符号可以帮助使用@media 标签

 @media
    only screen and ( -webkit-min-device-pixel-ratio: 1.5 ),
    only screen and ( min--moz-device-pixel-ratio: 1.5 ),
    only screen and ( -o-min-device-pixel-ratio: 3/2 ),
    only screen and ( min-device-pixel-ratio: 1.5 ),
    only screen and ( min-resolution: 96dpi ),
    only screen and ( min-resolution: 1.5dppx ) {
//codehere
}