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

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 {&nbsp; font-family: 'arial';&nbsp; color: blue;&nbsp; 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">&nbsp; <span>h</span>&nbsp; <span>e</span>&nbsp; <span>l</span>&nbsp; <span>l</span>&nbsp; <span>l</span>&nbsp; <span>o</span>&nbsp; <span>o</span>&nbsp; <span>o</span></div>

Answer 2

SCSS 允许您使用“for”语句。这是 html 和 SCSS 的示例。请尝试在 CodePen 写作。（如果你不打算使用 SCSS，我很抱歉。）.logo {&nbsp; font-family: 'arial';&nbsp; color: blue;&nbsp; }@for $i from 1 through 5 {&nbsp; .font-#{$i} {&nbsp; &nbsp; font-size: 78px + $i*4;&nbsp; }}@for $i from 5 through 9 {&nbsp; .font-#{$i} {&nbsp; &nbsp; font-size: 98px - ($i - 5)*4;&nbsp; }}&nbsp;<div class="logo">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-1">H</span><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-2">E</span><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-3">L</span><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-4">L</span><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-5">L</span><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-6">L</span><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-7">O</span><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-8">O</span><span&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; class="font-9">O</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>