Css 更改输入字段中每个字符下带下划线的字体

我想用Django创建一个完整的文本。间隙应显示缺少多少个字母。 例如： 这是一个例子。我会告诉你我所说的

我发现了一些有用的css代码片段。我试着使用它，用字母代替数字，并将字体改为SegoeUI。我的问题是，当我使用Segoe UI时，下划线不再与字母同步。如何更改配置，使其再次适合

我的SCSS代码：

$char-w: 1ch;
$gap: .5*$char-w;
$n-char: 7;
$in-w: $n-char*($char-w + $gap);

input {
    display: block;
    margin: 2em auto;
    border: none;
    padding: 0;
    width: $in-w;
    background: repeating-linear-gradient(90deg, 
        dimgrey 0, dimgrey $char-w, 
        transparent 0, transparent $char-w + $gap) 
        0 100%/ #{$in-w - $gap} 2px no-repeat;
    font: 5ch Segoe UI; /*That's the attribute i changed*/
    letter-spacing: $gap;

    &:focus {
        outline: none;
        color: dodgerblue;
    }
}

我的HTML代码：

<input maxlength='7' value=''/>

---

发生这种情况的原因是您使用的字体不是单间距的（字母有各自的宽度）。如果将字体更改为

font-family:monospace它会工作的

下面是一个使用Ubuntu的示例：


@导入url（“https://fonts.googleapis.com/css?family=Ubuntu|Ubuntu+Mono）；
身体{
字体：1.2rem'Ubuntu'，无衬线；
}
输入{
显示：内联块；
利润率：1.2rem自动；
边界：无；
填充：0；
宽度：10.5cm；
背景：重复线性梯度（90度，dimgrey 0，dimgrey 1ch，透明0，透明1.5ch）0 100%/10ch 2px不重复；
字体：1.2rem'ubuntumono'，monospace；
字母间距：0.5厘米；
}
输入：焦点{
大纲：无；
颜色：淡蓝色；
}
Lorem ipsum dolor sit amet
谢谢你，对我有用。但似乎Segoe没有单空格字体。我说得对吗？