使用CSS将非等宽字体强制为固定宽度
有没有办法强制字体使用CSS等宽字体？
我的意思是，使用非等宽字体，您可以强制浏览器以固定宽度呈现每个字符吗？
回答 7
Stack Overflow用户
发布于 2017-11-18 12:01:29
如果这是为了对齐表格中的数字，其中某些字体(使用传统排版)在默认情况下以可变宽度(例如Windows上的Segoe UI )呈现它们，则应查看以下CSS属性：
font-variant-numeric: tabular-nums;
(这将禁用至少受OpenType字体支持的numeric-spacing变体的proportional-nums默认值，以及您的特定平台的web浏览器的文本渲染器可能支持的其他字体格式)
不需要javascript！禁用这些字体中的可变宽度字形并强制它们使用表格数字是最干净的方法(这通常用于相同字体中的相同字形，但它们的前导和尾随间距增加，因此从0到9的10个数字将以相同的宽度呈现；但是，某些字体可能会避免视觉上的可变数字间距，并会略微加宽一些数字，或者可能会在数字1的底部添加底部衬线。
请注意，这不会禁用使用Segoe UI观察到的可变高度(例如，某些数字将仅为x高度，如小写字母，而其他数字将具有升序或降序)。这些传统的数字形式也可以使用CSS禁用，使用
font-variant-numeric: lining-nums;
(这将禁用至少受OpenType字体支持的numeric-figure变体的默认oldstyle-nums值，以及您的特定平台的web浏览器的文本渲染器可能支持的其他字体格式)
您可以将这两者组合在一起：
font-variant-numeric: tabular-nums lining-nums;
下面的代码片段使用单个比例字体(而不是等宽字体)演示了这一点。以数字形状变体为特色，例如Windows上的“Segoe UI”，并显示产生的不同水平和垂直对齐。
请注意，如果应用不同的样式，如粗体或斜体，而不是应用如下所示的中等罗马字体，则此样式不会禁止数字更改宽度，因为这些样式将使用具有其不同度量的不同字体(这并不适用于所有等宽字体)。
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/docs/Web/CSS/font-variant-numeric
Stack Overflow用户
发布于 2012-04-14 07:23:33
为什么不跳出框框，在表格里思考这个问题：
<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>Stack Overflow用户
发布于 2012-04-14 07:04:28
你不能用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>
https://stackoverflow.com/questions/10149330
复制相似问题
腾讯云开发者
