CSS可以用来使标准的加号和减号的宽度相同吗?

Posted

技术标签:

【中文标题】CSS可以用来使标准的加号和减号的宽度相同吗?【英文标题】:Can CSS be used to make standard plus and minus signs the same width? 【发布时间】:2021-06-23 20:28:01 【问题描述】:

通常,在比例字体中,正常的加号和减号(U+002B 和 U+002D)是不同的宽度:

+100 -100

因此,带有混合符号的数字在左对齐时无法正确对齐,而在右对齐时,尽管它们对齐,但符号的视觉“质量”差异令人不快。

某些字体效果更差;对我来说,Stack Overflow 位于 Liberation Sans 中,差别不大,而我的默认衬线字体是 DejaVu Serif,它很显着。

我想让加号和减号的宽度相同,并且视觉上平衡。

这里的一种方法是使用正确的减号 (U+2212),它与正常的加号 (U+002B) 的宽度相同。但是,我所知道的任何语言的标准格式化和解析函数都没有使用它;使用它会很痛苦,并且可能会破坏复制和粘贴。我宁愿不这样做。

有没有办法使用 CSS 来指示正常的连字符减号 (U+002D) 应该显示为减号而不是连字符?

font-variant-numeric: tabular-nums; 似乎没有这样做(没有特别的理由认为应该这样做,但值得一试!)。

【问题讨论】:

这不是单字体的用途吗? 【参考方案1】:

在显示这些字符时使用等宽字体系列。这样,它们将按照您想要的方式垂直排列。以下是无衬线等宽字体的示例字体堆栈:

font-family: 'Menlo', 'Lucida Console', 'Monaco', 'Consolas', monospace;

html 中使用:

<style>
.monospace
    font-family: 'Menlo', 'Lucida Console', 'Monaco', 'Consolas', monospace;

</style>

<div class="monospace">
-100<br/>
+99<br/>
-483
</div>

【讨论】:

以上是关于CSS可以用来使标准的加号和减号的宽度相同吗?的主要内容,如果未能解决你的问题,请参考以下文章

在python中能使用加号和减号来连接和删除字符串吗?

DIV,CSS如何实现“加减号”“显示隐藏”效果

DIV,CSS如何实现“加减号”“显示隐藏”效果

linux中的-(减号)

减号的英语怎么写?

CSS - 使用 calc() 保持元素的宽度相同