fonts - 确保 Unicode 数字形式、下标、方框图和几何形状字符的宽度固定

Question

我一直在玩弄使用 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>标签似乎工作正常，但我想就地编辑这些图表。我可以在 textarea 中使用该样式吗？

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

使用自定义字体怎么样，比如 GNU Unifont ?我该怎么做？考虑到这种完整的字体有多大，它会有多贵？

注意:还有一些关于 unicode 和 monospacing 的问题，比如 this one .大多数答案是“unicode 真的很大，所以不是所有的字符都可以使用!”和“这是一个 巨大的 字体，可能会覆盖它!”。我不认为那些不能解决我的问题，因为我不希望客户下载兆字节大小的字体，而且我只需要一小部分 unicode 字符即可工作。

Answer 1

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

我认为您肯定想要这样做，因为完整的 Unifont 是 12 MB，从您的描述来看，您几乎可以肯定不需要该字体中包含的所有内容(实际上，只需要其中的一小部分)。