所以我有一些文本，我将其设为upright，我希望每个字母后面都有不同的background.
对于我的实际用例，背景列表是由一个函数随机生成的，该函数获得字母的数量.
现在的问题是.how much vertical space does a letter occupy?我在这里使用等宽字体，并将line-height设置为1(这是我可以 Select 的值，所以我 Select 了1，因为我认为这会简化事情).
以下是代码的模拟萨斯版本:
$c: #448aff, #1565c0, #009688, #8bc34a, #ffc107, #ff9800, #f44336, #ad1457;
$n: length($c);
$m: .5*$n;
$l: ();
@for $i from 0 to $m {
$l: $l,
conic-gradient(from random(360)*1deg
at random(100)*1% random(100)*1%,
nth($c, $i + 1), nth($c, $i + $m + 1),
nth($c, $i + 1))
0 $i*1em
}
div {
box-shadow: 0 0 0 6px;
background: $l;
background-repeat: no-repeat;
background-size: 100% 1em;
font: 900 clamp(1em, 18vmin, 18em)/ 1 monospace;
writing-mode: vertical-lr;
text-orientation: upright;
text-transform: uppercase
}
所以，如果line-height是1，我会认为一个字母占1lh或1em...但这还不够！
div {
box-shadow: 0 0 0 6px;
background:
conic-gradient(from 37deg at 54% 48%, #448aff, #ffc107, #448aff),
conic-gradient(from 264deg at 8% 31%, #1565c0, #ff9800, #1565c0) 0 1em,
conic-gradient(from -61deg at 92% 2%, #009688, #f44336, #009688) 0 2em,
conic-gradient(from -5deg at 41% 95%, #8bc34a, #ad1457, #8bc34a) 0 3em;
background-repeat: no-repeat;
background-size: 100% 1em;
font: 900 clamp(1em, 18vmin, 18em)/1 monospace;
writing-mode: vertical-lr;
text-orientation: upright;
text-transform: uppercase
}<div>play</div>What am I missing? How much vertical space does a letter occupy in this scenario? How do I size and position my gradients so that I have one behind each letter?个
将文本拆分成字母，每个字母都包装在一个元素中，每个元素都有自己的background个元素，在这里绝对不能这样做.对那个不感兴趣.