在等宽字体中垂直对齐html-entity字符？

Question

有时，我需要键入字符列垂直对齐的文本，最简单的方法当然是使用字体家族“等宽字体”，“ Courier”等。

不过，我注意到的是，许多html实体代码字符（表情符号等）并不总是符合此固定字体宽度，但仍比普通字符宽，并且在同一行上“压入”后续字符尽管使用等宽，但仍在右侧。

例如：

♡ =♡---等宽处略宽。

♛ =♛---等宽空间太宽。

♥ =♥---这遵循我的Windows笔记本电脑上的等宽宽度，但是使用android / chrome浏览时，宽度太宽了。

是否有任何修补程序/变通办法可防止这种异常行为？

我在想，是否有办法“压缩”此类字符的宽度，以确保它们都与固定的字符宽度对齐，并且最好能在不同设备上统一工作？

还是其他可行的解决方案？

Answer 1

我相信这是因为您的等宽字体（例如Courier）没有那些unicode字形。然后，系统将使用后备字体呈现表情符号，并且该字体不是等宽的。

因此，最好的解决方案是使用支持您要使用的表情符号的等宽字体。

或者，您可以在这些字符周围放置一个跨度并强制使用width。

.monospace {
  font-family: monospace;
  font-size: 20px;
}
.monospace > span {
  display: inline-block;
  width: 12px;
}

<div class="monospace">
  foo<br>
  <span>?</span><span>?</span><span>?</span>
</div>

（请注意，如果您的编辑器设置正确，则可以直接在源代码中使用unicode字符。）