如何使用unicode字符绘制带有圆角的漂亮盒子?

如何使用unicode字符绘制带有圆角的漂亮盒子?

我尝试使用方框画人物来自 Wikipedia,但我找不到适合圆角的垂直线(如下所示,它们要么偏离,要么没有连接),而且水平线太粗。有适合这些角的字符吗?

╭━━━━╮
│test │  
╰━━━━╯

答案1

你的框由左边缘和右边缘(1 个字符宽度)组成...但是你有4 个字符沿着顶部和底部的边缘,以及5 个字符内容(test和一个空格)。您需要确保使用相同数量的字符进行对齐 - 不要添加空格进行对齐。

此外,您使用 U+2501 表示顶部/底部,而 U+2500 "看起来更好“/看上去不太厚。

╭────╮
│test│  
╰────╯
╭──────╮
│ test │  
╰──────╯

对于我来说,这两个框在 Windows 10 上的 Chrome、Firefox 和 Edge 中都可以很好地呈现。

出于这些原因,并不建议绘制带有特殊字符的框 - 如果您要渲染到终端,那么它可能会更好。


上述文本的呈现效果如下所示(在 Windows 上的 Chrome 上)。我在 Chrome 中使用 100% 缩放,在 Windows 中使用 100% 缩放。

例子

从您的屏幕截图来看,您似乎使用了一些缩放比例,但是我尝试在 Chrome 和 Windows 中使用非 100% 设置,但它似乎仍然可以很好地呈现。

字体很可能是导致该问题的原因……上面是使用 渲染的Consolas,但下面是使用 渲染的Lucida Console

例如,Lucida 控制台

相关内容