确保 unicode 数字形式、下标、方框图和几何形状字符的固定宽度答案

【问题标题】：Ensuring fixed-width of unicode number forms, subscripts, box drawing, and geometric shape characters确保 unicode 数字形式、下标、方框图和几何形状字符的固定宽度
【发布时间】：2014-08-19 18:49:23
【问题描述】：

我一直在玩弄使用 unicode 来绘制量子电路，像这样：

         ──H─────●────────────●─
                 │            │   
──H─●────────────X⅛───────────┼─●─
    │                         │ │ 
    │                       ──XXX──────
    │                         ││  
────X────────────X₁/₁₆────────┼●─
                 │            │
         ──H─────●────────────●─

如您所见，我正在利用 unicode box drawing、subscript、geometric shape 和 number form 字符。也是好的 ole ascii 字符，但它们表现得非常好。

问题是，当我将上面的内容粘贴到带有font-family: monospace 的文本区域时，它可能会或可能不会仍然排列元素。在我的 Ubuntu 机器上使用 Chrome 可以正常工作，但在我的 Windows 机器上使用 Chrome，下标最终会稍微小一些。这会破坏对齐方式，破坏电路，因此事物不再视觉连接。截图：

如何确保这些小图表在主要浏览器和平台上排列整齐？

<pre> 和 <code> 标记似乎可以正常工作，但我想编辑这些图表。我可以在 textareas 中使用该样式吗？

我只需要说font-family: no-like-REALLY-monospace-please-browser-spend-cpu-fixing-any-oversights吗？

如何使用自定义字体，例如GNU Unifont？我该怎么做？考虑到如此完整的字体有多大，它会有多贵？

注意：还有其他几个关于 unicode 和 monospacing 的问题，例如 this one。大多数答案是“unicode 真的很大，所以不是所有的字符都可以工作！”和“这里有一个可能覆盖它的 massive 字体！”。我不认为这些不能解决我的问题，因为我不希望客户下载兆字节大小的字体，我只需要一小部分 unicode 字符即可工作。

【问题讨论】：

标签： fonts cross-browser fixed-width

【解决方案1】：

如果 GNU Unifont 以您希望的方式运行，并且如果您确定（或几乎确定）您知道电路图所需的完整字符集，您可以最大限度地减少“费用”（数据大小-wise) 通过使用FontSquirrel 或其他类似服务，或者可能是像FontForge 这样的字体开发应用程序，将GNU Unifont 子集化为所需的字符集并将其用作webfont (CSS @font-face rule)。

我认为您肯定希望这样做，因为完整的 Unifont 为 12 MB，根据您的描述，您几乎可以肯定不需要该字体中包含的所有内容（实际上，只是其中的一小部分）。

【讨论】：