使用CSS强制将非单空格字体设置为固定宽度

有没有办法使用CSS强制字体为单间距

---

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

不，除非它是实际的单空格字体。

不，在CSS中无法强制任何内容。甚至没有办法建议将非单空间字体呈现为单空间字体。

CSS无法做到这一点。即使可以，结果也会很糟糕：

如果确实需要这样做，可以使用JavaScript将每个单独的字符包装到一个元素中（或者直接手动）：

函数换行符（$element）{
对于（变量i=0；i<$element.childNodes.length；i++）{
var$child=$element.childNodes[i]；
if（$child.nodeType===Node.TEXT\u Node）{
var$wrapper=document.createDocumentFragment（）；
对于（变量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\u Node）{
包装信（儿童）；
}
}
}
换行字母（document.queryselectoral（'.box'）[0]）；
包裹信函（document.queryselectoral（'.box'）[1]）
.char{
外形：1px实心rgba（255,0,0,0.5）；
}
.monospace.char{
显示：内联块；
宽度：15px；
文本对齐：居中；
}
这是一个标题
这是一个标题
为什么不跳出框框，在表格中思考这个问题：

<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>


塞雷宁软膏
主要是在平原。
我有时在倒计时时做了一件非常漂亮的事情：

html:

你不是说只使用CSS。只需要一点点Javascript就可以做到这一点，将每个字母包装成
span
。剩下的是CSS


window.onload=function（）{
const secondP=document.getElementById（'fixed'）；
const text=secondP.innerText；
const newText=text.split（“”）.map（c=>{
常量span=`${c}`；
返回跨度；
}).加入（“”）；
secondP.innerHTML=newText；
}
p{
位置：相对位置；
边框：1px纯黑；
边界半径：1米；
填充：1em；
保证金：3em 1em；
}
p：：之后{
内容：attr（名称）；
显示：块；
背景色：白色；
颜色：绿色；
填充：0.5em；
位置：绝对位置；
顶部：-0.6em；
左：0.5em；
}
#固定跨度{
显示：内联块；
宽度：1米；
文本对齐：居中；
}
它看起来可能不太好看，但通过一点Javascript，我可以强制可变宽度字体像固定宽度字体一样工作
它看起来可能不太好看，但通过一点Javascript，我可以强制可变宽度字体像固定宽度字体一样工作。
如果这是为了对齐表格中的数字，其中一些字体（使用传统排版）默认以可变宽度呈现（例如Windows上的Segoe UI），您应该查看以下CSS属性：

字体变量数值：表格格式NUM

（这将禁用至少由OpenType字体支持的
数字间距
变量的
比例nums
默认值，并且可能由您特定平台的web浏览器文本呈现程序支持的其他字体格式支持）

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

请注意，这不会禁用Segoe UI中观察到的可变高度（例如，某些数字的x高度仅与小写字母相同，其他数字将具有升序或降序）。这些传统数字形式也可以使用CSS禁用，使用

font-variant-numeric:lineing-nums；

（这将禁用至少由OpenType字体支持的
数值
变体的默认
oldstyle nums
值，以及您特定平台的web浏览器文本呈现程序可能支持的其他字体格式）

您可以将两者结合使用：

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


下面的代码片段使用单一比例字体（不是单间距！）演示了这一点，该字体具有数字的形状变体，例如Windows上的“Segoe UI”，并显示了生成的不同水平和垂直对齐

请注意，如果使用粗体或斜体等不同样式而不是如下图所示的中罗马字体，则此样式不禁止数字更改宽度，因为这些样式将使用不同的字体，并具有各自不同的度量标准（所有单空格字体也不保证这一点）


html{font-family:'Segoe-UI'；/*与数字变量成比例*/}
表{边距：0；填充：0；边框：1px实心#AAA；边框折叠：折叠；}
th，td{垂直对齐：顶部；文本对齐：右侧；}
.unset{字体变量数值：unset；}
.traditional{字体变量数字：比例nums oldstyle nums；}
.lining{font variant NUMER:按比例NUM lining nums；}
.tabular old{font variant numeric:tabular nums oldstyle nums；}
.tabular new{font variant numeric:tabular nums lining nums；}
.normal{字体变量数值：normal；}

取消
Rs12,3456789.00/Gal差异Rs86,4197532.11/Gal
Rs98,76,54321.11/Gal总计Rs1,11,11,11110.11/Gal
传统的
Rs12,3456789.00/
<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>

$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;}
}