有没有办法修改文本中每个字母的大小？

Question

我正在使用此代码从中心逐渐增加和减少我的标题。我认为可能有更多的CSS或JavaScript方法来解决这个问题。有人有想法吗？.logo {  font-family: 'arial';  color: blue; }<div class="logo">  <span style="font-size: 78px;">H</span><span style="font-size: 84px;">E</span>  <span style="font-size: 88px;">L</span><span style="font-size: 90px;">L</span>  <span style="font-size: 94px;">L</span><span style="font-size: 90px;">L</span>  <span style="font-size: 88px;">O</span><span style="font-size: 84px;">O</span>  <span style="font-size: 78px;">O</span></div>

Answer 1

除非您绝对需要，否则我不建议在这里使用 JS。即使您想为文本设置动画，也可以使用css animations。

这是您可能想要实现的一个干净的 CSS 示例。

.logo {

  font-family: 'arial';

  color: blue;

  font-size: 80px;

}

.logo > span:nth-child(1) { font-size:70%; }

.logo > span:nth-child(2) { font-size:80%; }

.logo > span:nth-child(3) { font-size:90%; }

/* .logo > span:nth-child(4) { font-size:100%; } */

/* .logo > span:nth-child(5) { font-size:100%; } */

.logo > span:nth-child(6) { font-size:90%; }

.logo > span:nth-child(7) { font-size:80%; }

.logo > span:nth-child(8) { font-size:70%; }

<div class="logo">

  <span>h</span>

  <span>e</span>

  <span>l</span>

  <span>l</span>

  <span>l</span>

  <span>o</span>

  <span>o</span>

  <span>o</span>

</div>

Answer 2

SCSS 允许您使用“for”语句。这是 html 和 SCSS 的示例。请尝试在 CodePen 写作。（如果你不打算使用 SCSS，我很抱歉。）

.logo {

  font-family: 'arial';

  color: blue;

  }

@for $i from 1 through 5 {

  .font-#{$i} {

    font-size: 78px + $i*4;

  }

}

@for $i from 5 through 9 {

  .font-#{$i} {

    font-size: 98px - ($i - 5)*4;

  }

}

 <div class="logo">

                <span

                class="font-1">H</span><span

                class="font-2">E</span><span

                class="font-3">L</span><span

                class="font-4">L</span><span

                class="font-5">L</span><span

                class="font-6">L</span><span

                class="font-7">O</span><span

                class="font-8">O</span><span

                class="font-9">O</span>

            </div>