有没有一种方法可以规范表情符号的大小和宽度？

Question

这个例子存在两个问题：

• 不同的表情符号具有不同的水平“空白”，这意味着如果我添加 margin-right 以将宽表情符号与数字分开，一些表情符号具有自然“空白”，间距会变得非常大
• 相对于旁边的数字，在 MacBook 2880x1800（15.4英寸）和外部 2560x1440（27英寸）显示器上，表情符号的大小差异非常大 - 在某些原因下，外部显示器上的表情符号要大得多

是否有一种方法来规范化这些问题（特别是第二个问题）？

PS！我知道可以使用图像表情符号作为解决这些问题的诀窍，但是这个问题是关于本地表情符号的。

截图

1. MacBook 显示屏

2. 外部显示器

.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>

- Solo

---

即使使用其他字体（如Noto Emoji Color），也似乎无法解决此问题：https://jsfiddle.net/8850s/64m25gts/3/ - shreyasm-dev

Answer 1

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

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

我在思考Macbook上的Retina显示屏，以双倍像素的方式显示像素，有时会导致问题，特别是在表情符号上。也许使用@media标签为Retina显示屏单独更改表情符号可以解决这个问题。

 @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
}

- aljaz-code