数字字体大小从小到大

时间:2019-05-29 12:00:18

标签: javascript php css

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

如何使用CSS或JS存档?

1 个答案:

答案 0 :(得分:4)

尝试

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>