Question

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

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

例如：

♡ =♡---等宽处太宽了。

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

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

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

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

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

Answer 1

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

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

或者，您可以put in a span around those characters and force the 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字符。）

Answer 2

[编辑] 我编辑了答案，以使等间距的字母成为可能，而不必为我以前的答案在每个段落上添加跨度标签或使用类。现在，只需键入段落，字母就会对齐。

这将使列中任何字体的字母对齐，但是我使用了等距字体，因为这是您感兴趣的用途。

请注意，我在示例中添加了边框以显示对齐方式，只需删除此样式即可。

运行代码片段以查看。

window.onload = function() {
    numRows = document.getElementById("spacingcontainer").children;
    for (i=0; i<numRows.length; i++) {
        temp = "";
        for (j=0; j<numRows[i].innerHTML.length; j++) {
            letter = numRows[i].innerHTML[j];
            temp += "<span>" + letter + "</span>";
        }
        numRows[i].innerHTML = temp;
    }
}

	#spacingcontainer {
	    display:table;
	    font:18px monospace;
	}
	#spacingcontainer p {
	    display:table-row;
	}
	#spacingcontainer p span {
	    display:table-cell;
	    width:12px;
	    text-align:center;
	    border:1px solid silver; /* remove border */
	}

<div id="spacingcontainer">
<p>Align letters in columns.</p>
<p>&#9825;a&#9819;&hearts; &#174;q f&#174; h&#8364;j&#9825;i&#165; &hearts;&#163;&#162;&#9820;&#9826;&#9825;&hearts;</p>
<p>This is monospaced font</p>
</div>

将HTML实体字符垂直对齐为等宽字体？

2 个答案: