强制非等宽字体为固定宽度使用CSS强制非等宽字体为固定宽度使用CSS(Force Non-Monos

有没有什么办法来强制使用CSS是等宽字体？

我的意思是，使用非等宽字体，可以强制浏览器在一个固定的宽度，从而使得各角色？

Answer 1:

如果这是在表对准位，其中某些字体（与传统的排版）默认使用可变宽度使其（如濑越UI在Windows上），你应该考虑的CSS属性：

font-variant-numeric: tabular-nums;

（此禁用proportional-nums默认值numeric-spacing通过Web浏览器的文本渲染您的特定平台支持的字体格式至少由OpenType字体支持的变种，并有可能）

没有JavaScript的需要！ 它是禁用在这些字体的可变宽度的字形，并迫使他们使用表格位数（这通常在相同的字体相同的字形使用干净的方式，但其前缘和后间隙被增加，从而在10个数字0到9将呈现以相同的宽度;然而一些字体可避免视觉可变位间的间隔和将略微widden一些数字，或者可以底部衬线添加到数字1的脚下。

请注意，这并不禁止使用的Segoe UI观察到的可变高度（比如一些数字是x高度只有像小写字母，其他人将有伸或伸）。 这些传统的数字形式可以与CSS被禁用也使用

font-variant-numeric: lining-nums;

（此禁用默认的oldstyle-nums的价值numeric-figure由Web浏览器的文本渲染您的特定平台支持OpenType字体至少支持变种，并通过其他可能的字体格式）

您可以结合两种：

font-variant-numeric: tabular-nums lining-nums;

---

下面的代码段演示此使用单一比例字体（未等宽！）设有用于数字形状变体，例如在Windows“的Segoe UI”，并显示所产生的不同的水平和垂直对齐。

请注意，这种风格并不禁止要更改的数字宽度如果采用代替，如下图所示，因为这些将使用不同的字体，用自己独特的指标（这是不是所有的等宽字体warrantied为好）中的罗马风格迥异如粗体或斜体。

 html { font-family: 'Segoe UI'; /* proportional with digit variants */ } table { margin: 0; padding: 0; border: 1px solid #AAA; border-collapse: collapse; } th, td { vertical-align:top; text-align:right; } .unset { font-variant-numeric: unset; } .traditional { font-variant-numeric: proportional-nums oldstyle-nums; } .lining { font-variant-numeric: proportional-nums lining-nums; } .tabular-old { font-variant-numeric: tabular-nums oldstyle-nums; } .tabular-new { font-variant-numeric: tabular-nums lining-nums; } .normal { font-variant-numeric: normal; } 

 <table> <tr><th>unset<td><table width="100%" class="unset"> <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal </table> <tr><th>traditional<td><table width="100%" class="traditional"> <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal </table> <tr><th>lining<td><table width="100%" class="lining"> <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal </table> <tr><th>tabular-old<td><table width="100%" class="tabular-old"> <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal </table> <tr><th>tabular-new<td><table width="100%" class="tabular-new"> <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal </table> <tr><th>normal<td><table width="100%" class="normal"> <tr><td>Rs12,34,56,789.00/Gal<td><i>Difference Rs86,41,97,532.11/Gal <tr><td>Rs98,76,54,321.11/Gal<td><b>Total Rs1,11,11,11,110.11/Gal </table> </table> 

参考： https://developer.mozilla.org/fr/docs/Web/CSS/font-variant-numeric

Answer 2:

为什么不跳出固有的框框，并为这样的表内：

<table cellpadding="0" cellspacing="0">
<tr><td>T</td><td>h</td><td>e</td><td></td><td>r</td><td>a</td><td>i</td><td>n</td><td></td><td>i</td><td>n</td><td></td><td>S</td><td>p</td><td>a</td><td>i</td><td>n</td><td></td><td>s</td><td>t</td><td>a</td><td>y</td><td>s</td></tr>
<tr><td>m</td><td>a</td><td>i</td><td>n</td><td>l</td><td>y</td><td></td><td>i</td><td>n</td><td></td><td>t</td><td>h</td><td>e</td><td></td><td>p</td><td>l</td><td>a</td><td>i</td><td>n</td><td>s</td><td>.</td></tr>
</table>

Answer 3:

你不能用CSS做到这一点。 即使你能，结果将惨不忍睹：

如果你真的需要做到这一点，你可以使用JavaScript来包装每一个个性的一个元素（或只是用手做）：

 function wrap_letters($element) { for (var i = 0; i < $element.childNodes.length; i++) { var $child = $element.childNodes[i]; if ($child.nodeType === Node.TEXT_NODE) { var $wrapper = document.createDocumentFragment(); for (var i = 0; i < $child.nodeValue.length; i++) { var $char = document.createElement('span'); $char.className = 'char'; $char.textContent = $child.nodeValue.charAt(i); $wrapper.appendChild($char); } $element.replaceChild($wrapper, $child); } else if ($child.nodeType === Node.ELEMENT_NODE) { wrap_letters($child); } } } wrap_letters(document.querySelectorAll('.boxes')[0]); wrap_letters(document.querySelectorAll('.boxes')[1]); 

 .char { outline: 1px solid rgba(255, 0, 0, 0.5); } .monospace .char { display: inline-block; width: 15px; text-align: center; } 

 <h2 class="boxes">This is a title</h2> <h2 class="boxes monospace">This is a title</h2> 

Answer 4:

没有，没有办法强迫在CSS什么。 而且竟然没有办法表明，非等宽字体被渲染成等宽字体。

Answer 5:

好吧，你没有说只使用CSS。 这是可能做到这一点的JavaScript的只是一点点包裹在每个字母span 。 其余的是在CSS中...

 window.onload = function() { const secondP = document.getElementById('fixed'); const text = secondP.innerText; const newText = text.split('').map(c => { const span = `<span>${c}</span>`; return span; }).join(''); secondP.innerHTML = newText; } 

 p { position: relative; border: 1px solid black; border-radius: 1em; padding: 1em; margin: 3em 1em; } p::after { content: attr(name); display: block; background-color: white; color: green; padding: 0 0.5em; position: absolute; top: -0.6em; left: 0.5em; } #fixed span { display: inline-block; width: 1em; text-align: center; } 

 <p id="variable" name="Variable Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p> <p id="fixed" name="Fixed Width">It might not look nice, but with a little Javascript, I can force a variable width font to act like a fixed-width font.</p> 

在常规文本段落，它看起来可怕，但存在这样的情况时，这是有道理的。 图标字体和Unicode符号可以既使用这项技术。

我发现这个问题，而试图找到那名经常转移文本向右时，他们与其他Unicode的符号取代统一符号的解决方案。

Answer 6:

不，不，除非它是一个真正的单间距字体。

Answer 7:

我已经做了柠漂亮的东西有时倒计时：

HTML：

<div class="counter">
    <span class="counter-digit counter-digit-0">2</span>
    <span class="counter-digit counter-digit-1">4</span>
    <span class="counter-digit counter-digit-divider">/</span>
    <span class="counter-digit counter-digit-2">5</span>
    <span class="counter-digit counter-digit-3">7</span>
</div>

SCSS：

$digit-width: 18px;
.counter {

    text-align: center;
    font-size: $digit-width;

    position: relative;

    width : $digit-width * 4.5;
    margin: 0 auto;
    height: 48px;
}
.counter-digit {

    position: absolute;
    top: 0;
    width: $digit-width;
    height: 48px;
    line-height: 48px;
    padding: 0 1px;

    &:nth-child(1) { left: 0; text-align: right; }
    &:nth-child(2) { left: $digit-width * 1; text-align: left;}
    &:nth-child(3) { left: $digit-width * 2; text-align: center; width: $digit-width / 2} // the divider (/)
    &:nth-child(4) { left: $digit-width * 2.5; text-align: right;}
    &:nth-child(5) { left: $digit-width * 3.5; text-align: left;}
}

Answer 8:

我刚刚发现的text-transform: full-width; 实验性的关键字 ，其中：

[...]强制字符[...]的书面正方形内[...]

文本转换| MDN

负相结合letter-spacing ，可以得到不那么可怕的结果：

<style>
pre {
  font-family: sans-serif;
  text-transform: full-width;
  letter-spacing: -.2em;
}
</style>

<!-- Fixed-width sans-serif -->
<pre>
. i I 1  | This is gonna be awesome.
ASDFGHJK | This is gonna be awesome.
</pre>

<!-- Default font -->
. i I 1  | This is gonna be awesome.
<br>
ASDFGHJK | This is gonna be awesome.

文章来源: Force Non-Monospace Font into Fixed Width Using CSS