Html 我怎样才能使某些字母彼此垂直对齐？

所以对于一个学校项目，我想把它数字化到一个网站上。然而，我不能让每行上的字母间隔得正好在彼此上方。像“i”和“l”这样的细字母是因为每行的宽度不同

我目前已经将所有单词放在span标记中，这样我就可以独立地为它们提供js和CSS属性

有更好的方法吗

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：开放式SAN；
颜色：#FFFFFF；
背景色：#4444；
}
梅因先生{
背景：#ccc；
宽度：470px；
位置：相对位置；
利润率：75px自动；
文本转换：大写；
字体大小：30px；
填充：50px；
字母间距：3px；
}

我不能
L
我是
a s t i m e
A.
C
q u a r t r
d c
是的
f i v e
x
h a l f
s
特恩
F
托托
p a s t
e r u
n i n e
奥恩
s i x
t h r e
富尔
f i v e
t w o
e i g h t
e l e v e n
s e v e n
t w l v e
特恩
s e
o'c l o'c k

您可以使用单间距字体。等距字体对所有字母都有固定的宽度

Google fonts（）上提供的一些单间距字体：

IBM丛单声道

机器人单声道

源代码专业版

Ubuntu Mono

我在下面的示例中使用了单空间字体系列

font-family:monospace

---

下面是JS fiddle的示例：

使用单空格字体？是的，这很有效！！谢谢