css - 使用 CSS 强制非等宽字体为固定宽度

Question

有什么方法可以使用 CSS 强制字体等宽吗？

我的意思是，使用非等宽字体，您可以强制浏览器以固定宽度呈现每个字符吗？

Answer 1

如果这是为了对齐表格中的数字，其中某些字体(使用传统排版)默认以可变宽度呈现它们(例如 Windows 上的 Segoe UI)，您应该查看以下 CSS 属性:

font-variant-numeric: tabular-nums;

(这禁用了 numeric-spacing 变体的 proportional-nums 默认值，至少由 OpenType 字体支持，并且可能由文本渲染器支持的其他字体格式支持您的特定平台的网络浏览器)

无需 JavaScript!这是最干净的方法来禁用这些字体中的可变宽度字形并强制它们使用表格数字(这通常在相同字体的相同字形中使用，但它们的前导和尾随间隙增加所以 10 位数字从 0 到9 将以相同的宽度呈现；但是某些字体可能会避免视觉可变的数字间距，并且会稍微加宽一些数字，或者可能会在数字 1 的 footer 添加底部衬线。

请注意，这不会禁用使用 Segoe UI 观察到的可变高度(例如某些数字将仅像小写字母一样是 x 高度，其他数字将具有上升或下降)。这些传统的数字形式也可能被 CSS 禁用，使用

font-variant-numeric: lining-nums;

(这将禁用至少由 OpenType 字体支持的 numeric-figure 变体的默认 oldstyle-nums 值，并且文本渲染器可能支持的其他字体格式您的特定平台的网络浏览器)

您可以将两者结合起来:

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