使网页上的每个 Unicode 字符具有相同的宽度答案

【问题标题】：Make every Unicode character on a web page the same width使网页上的每个 Unicode 字符具有相同的宽度
【发布时间】：2012-12-13 16:27:41
【问题描述】：

我需要以下两个 Unicode 字符在网页中具有相同的宽度：▼ (▼) 和 ▶ (▶)

font-family: monospace; 没有帮助，它们的宽度仍然不同（Windows 8、Firefox 17）：

有没有办法让页面上的每个（不仅是普通字母）字符都具有相同的宽度？

示例源代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>7
  <body>
    <h1 style="font-family: monospace;">
      &#9660;test 
      <br>
      &#9654;test
    </h1>
  </body>
</html>

【问题讨论】：

标签： html unicode fonts

【解决方案1】：

将这两个字符放在另一个标签中（如<span>），并使用 CSS 为其提供固定宽度。像这样（working example）：

<span style="display: inline-block; width: 30px;">&#9660;</span>test 
<br>
<span style="display: inline-block; width: 30px;">&#9654;</span>test

或者选择一种我认为更合适的纯 CSS 方法 (working example)：

<span class="opened">test</span>
<br>
<span class="closed">test</span>

还有 CSS 代码：

.opened::before {
    display: inline-block;
    content: "▼";
    width: 30px;
}

.closed::before {
    display: inline-block;
    content: "▶";
    width: 30px;
}

【讨论】：

非常感谢！一个额外的小问题：width: 1em 会使其可扩展（用于不同密度的显示器）吗？
您认为我正在构建一种具有打开和关闭节点的树是正确的。 “之前”选择器的技巧也很有帮助：-) 我还发现字符 ► (►) 比 ▶ (▶) 更适合。
@Andrej 我不确定你所说的显示密度是什么意思，但是，如果你在em 中指定一个宽度，当你设置一个更大的font-size 时它会变得更宽。这里是an example 宽度和2em 的宽度。
我指的是具有更高 DPI 的智能手机。您最后一个带有“2em”的示例演示了正确的行为 - 特殊字符占用的空间与字体大小一起缩放。
高 DPI 屏幕（如 Apple 设备中的 Retina 屏幕）的尺寸通常是自动计算的。如果我为一个对象指定 30 像素的宽度并在我的 iPhone 或 iPad 上使用 Retina 显示屏打开页面，则内容在屏幕上显示为 60 个点。您可以阅读有关 Apple 设备上高分辨率内容的更多信息here。