如何使用 unicode 字符绘制漂亮的圆角框？

Question

我尝试使用维基百科中的框画字符，但找不到适合圆角的垂直线（如下所示，它们要么关闭，要么未连接），并且水平线太粗。有适合这些角落的角色吗？

\n\n

\xe2\x95\xad\xe2\x94\x81\xe2\x94\x81\xe2\x94\x81\xe2\x94\x81\xe2\x95\xae\n\xe2\x94\x82test \xe2\x94\x82  \n\xe2\x95\xb0\xe2\x94\x81\xe2\x94\x81\xe2\x94\x81\xe2\x94\x81\xe2\x95\xaf\n

\n

Answer 1

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

\n\n

此外，您使用 U+2501 作为顶部/底部，而 U+2500“看起来更好”/看起来不太厚。

\n\n

\xe2\x95\xad\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xae\n\xe2\x94\x82test\xe2\x94\x82  \n\xe2\x95\xb0\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xaf\n\xe2\x95\xad\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xae\n\xe2\x94\x82 test \xe2\x94\x82  \n\xe2\x95\xb0\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x95\xaf\n

\n\n

这些框在 Windows 10 上的 Chrome、Firefox 和 Edge 中都可以很好地呈现。

\n\n

由于这些原因，实际上并不建议使用特殊字符绘制框 - 如果您要渲染到终端，那么它可能会工作得更好。

\n\n\n\n

上面的文本呈现如下所示（在 Windows 上的 Chrome 上）。我在 Chrome 中使用 100% 缩放，在 Windows 中使用 100% 缩放。

\n\n

\n\n

从你的屏幕截图来看，你似乎正在使用一些缩放，但是我尝试在 Chrome 和 Windows 中使用非 100% 设置，但它似乎仍然对我来说渲染得很好。

\n\n

字体很可能导致问题...上面是使用 渲染的Consolas，但下面是使用 渲染的Lucida Console：

\n\n

\n