数字字体大小从小到大

Question

我有一个数字= 12345678，我的预期输出是第一个数字字体的大小小，然后下一个数字字体的大小大于第一个数字的字体，而第三个数字字体的大小大于第二个数字字体的大小，依此类推。

如何使用CSS或JS存档？

Answer 1

尝试

let n='12345678';

box.innerHTML= [...n].map((x,i)=>`<span style='font-size:${2*i+20}px'>${x}</span>`).join('');

<div id='box'></div>

和纯CSS-但字体质量低和数字不位于水平线上

.num { 
  margin-top:20px;
  transform: translateX(-13px) scaleX(1.35) perspective(100px) rotateY(-45deg);  
  width:100px;
  line-height: 14px;
  font-size: 25px;
  /*background: red;*/
}

<div class="num">12345678</div>