html - 我怎样才能让某些字母在彼此上方直接对齐？

Question

所以对于一个学校元素，我想要这个 Word clock在网站上数字化。但是，我无法让每行上的字母以恰好彼此重叠的方式间隔开。像“i”和“l”这样的细字母会导致每条线的宽度不同。

我目前已将所有单词放在 span 标签中，因此我可以独立地为它们提供 js 和 CSS 属性。

有更好的方法吗？

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body{
	font-family: Open Sans;
	color: #FFFFFF;
	background-color: #444444;
}

.main {
  background: #ccc;
  width: 470px;
  position: relative;
  margin: 75px auto;
  text-transform: uppercase;
  font-size: 30px;
  padding: 50px;
  letter-spacing: 3px;
}

<div class="main">

      <div class="row1">
        <span>i t</span>
        <span>l</span>
        <span>i s</span>
        <span>a s t i m e</span>
      </div>

      <div class="row2">
        <span>a </span>
        <span>c</span>
        <span>q u a r t e r</span>
        <span>d c</span>
      </div>

      <div class="row3">
        <span>t w e n t y</span>
        <span>f i v e</span>
        <span>x</span>
      </div>

      <div class="row4">
        <span>h a l f</span>
        <span>s</span>
        <span>t e n</span>
        <span>f</span>
        <span>t o</span>
      </div>

      <div class="row5">
        <span>p a s t</span>
        <span>e r u</span>
        <span>n i n e</span>
      </div>

      <div class="row6">
        <span>o n e </span>
        <span>s i x</span>
        <span>t h r e e</span>
      </div>

      <div class="row7">
        <span>f o u r</span>
        <span>f i v e</span>
        <span>t w o</span>
      </div>

      <div class="row8">
        <span>e i g h t</span>
        <span>e l e v e n</span>
      </div>

      <div class="row9">
        <span>s e v e n</span>
        <span>t w e l v e</span>
      </div>

      <div class="row10">
        <span>t e n</span>
        <span>s e</span>
        <span>o' c l o c k</span>
      </div>

    </div>

Answer 1

您可以使用等宽字体。等宽字体的所有字母都具有固定宽度。

Google 字体上可用的一些等宽字体(https://fonts.google.com/):

1. IBM Plex 单声道

2. 单声道机器人

3. 源代码专家

4. Ubuntu 单声道

   我在下面的例子中使用了 monospace font-family。

   font-family:monospace
   

这是 JS fiddle 示例:https://jsfiddle.net/srijan1709/xfLuw3pv/2/