javascript - CSS字体大小以保持相同的字宽

Question

我正在尝试让单词“Hello”、“Projects”、“Social”和“Contact”相应地调整它们的字体大小，以便单词的宽度都相同，而不是必须以像素为单位像素。

我以为我正在使用视口(viewport)宽度，但这并没有达到我想要的效果。

有关所需效果，请参见图片。

Answer 1

您可以使用vw 单位调整font-size 和letter-spacing

.title {
  font-size: 15vw;
  padding: 20px 0;
  font-family: arial;
}

.title:first-child {
  letter-spacing:5vw;
}

<div>
  <div class="title">
    Hello
  </div>
  <div class="title">
    Projects
  </div>
</div>