7

有时，我需要在字符列垂直对齐的地方键入文本，最简单的方法当然是使用 font-family "monospace"、"Courier" 等。

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

这样的例子是：

♡= ♡ --- 在等宽中稍宽。

♛= ♛ --- 在等宽中太宽了。

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

是否有任何修复/解决方法可以防止这种异常行为？

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

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

4

2 回答 2

6

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

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

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

.monospace {
  font-family: monospace;
  font-size: 20px;
}
.monospace > span {
  display: inline-block;
  width: 12px;
}
<div class="monospace">
  foo<br>
  <span>♡&lt;/span><span>♛&lt;/span><span>♥&lt;/span>
</div>

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

于 2019-05-25T11:24:48.537 回答
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>

于 2019-05-30T04:32:55.507 回答