html - 如何对齐网页上的 ASCII 图形字符？

Question

我正在尝试用 HTML 绘制一个基于文本的 GUI(只是为了好玩)，它看起来像一个旧的终端应用程序，但我遇到了一个问题:

当我有两行 (div) 并在其中放置图形字符时:

░░░
░░░

我无法正确(垂直)对齐线条。如果我只是像这样在我的 div 中放置终端字符:

<div class="line">&blk14;&block;&boxV;&lhblk;&uhblk;</div>
<div class="line">&blk14;&block;&boxV;&lhblk;&uhblk;</div>

它们之间有一点间距。 (可能是高度/行高问题)。

如果我这样设计它们:

.line {
    height: 1em;
    line-height: 1em;
}

它们重叠。我试图手动微调这些值，但似乎 height 和 line-height 不能很好地协同工作，例如 font-size: 40px 和 line-height: 40px 我必须使用 45.5px 的高度值。我的方法有什么问题？有没有一种无需微调即可对齐线条的简单方法？

请注意我将所有间距/边距/填充归零，并且还在开发人员工具中检查了计算的 css，因此这两者都不是问题。

我的基础 CSS 是这样的:

* {
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Source Code Pro', monospace;
}

Answer 1

我至少要添加font-family: monospace，参见fiddle .

但老实说，我会使用 pre 标签，如果需要的话 spans - 而不是逐行 div。