使用 CSS 将非等宽字体强制为固定宽度 [英] Force Non-Monospace Font into Fixed Width Using CSS

问题描述

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

Is there any way to force a font to be monospaced using CSS?

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

By this I mean, using a non-monospace font, can you force the browser to render each character at a fixed width?

推荐答案

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

If this is for aligning digits in tables where some fonts (with traditional typography) render them by default with variable width (e.g. Segoe UI on Windows), you should look into CSS properties for:

font-variant-numeric: tabular-nums;

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

(this disables the proportional-nums default value for the numeric-spacing variant supported at least by OpenType fonts, and possibly by other font formats supported by the text renderer of your web browser for your particular platform)

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

No JavaScript needed! It is the cleanest way to disable the variable-width glyphs in these fonts and force them to use tabular digits (this generally uses in the same glyphs in the same font, but their leading and trailing gap is increased so the 10 digits from 0 to 9 will render at the same width; however some font may avoid the visual variable interdigit spacing and will slightly widden some digits, or could add bottom serifs to the foot of digit 1.

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

Note that this does not disable the variable height observed with Segoe UI (such as some digits will be x-height only like lowercase letters, others will have ascenders or descenders). These traditional digit forms may be disabled with CSS too, using

font-variant-numeric: lining-nums;

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

(this disables the default oldstyle-nums value for the numeric-figure variant supported at least by OpenType fonts, and by possibly other font formats supported by the text renderer of your web browser for your particular platform)

您可以将两者结合起来:

You can combine both:

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

--

下面的代码片段使用具有数字形状变体的单一比例字体(不是等宽！)演示了这一点，例如 Windows 上的Segoe UI"，并显示了产生的不同水平和垂直对齐方式.

The snippet below demonstrates this using a single proportional font (not monospaced!) featuring shape variants for digits, such as 'Segoe UI' on Windows and shows the different horizontal and vertical alignments produced.

请注意，如果应用不同的样式(如粗体或斜体)而不是下图所示的中罗马字体，则此样式不会禁止数字更改宽度，因为它们将使用具有自己独特度量的不同字体(这并不保证所有等宽字体).

Note that this style does not prohibit digits to change width if different styles like bold or italic is applied instead of medium roman as shown below because these will use different fonts with their own distinct metrics (this is not warrantied as well with all monospace fonts).

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

这篇关于使用 CSS 将非等宽字体强制为固定宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！