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。

Answer 2

我在边缘浏览器上测试了这个。我不知道其他浏览器会发生什么。请记住，对于较小的字体大小（在.5em下），某些字形可能会因显示器分辨率，浏览器和大小而变得模糊。

<!DOCTYPE html>
<html>
<head>
    <title>page title</title>
    <style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: 'Source Code Pro', monospace;
    }
    .line {
        /* height: 1em; */
        /* line-height: 1em; */
        font-size: 5em;
    }
    </style>
</head>
<body>
    <div class="line">&blk14;&block;&boxV;&lhblk;&uhblk;</div>
    <div class="line">&blk14;&block;&boxV;&lhblk;&uhblk;</div>
</body>
</html>

如何在网页上对齐ASCII图形字符？

2 个答案: