如果 `line-height: 1` 则直立字母占据的高度

Question

所以我有一些文字，我制作了

upright

，我想在每个字母后面有不同的

background

。

对于我的实际用例，背景列表是由输入字母数量的函数随机生成的。

现在的问题是... 一个字母占据多少垂直空间？我在这里使用等宽字体，并将

line-height

设置为

1

（这是我可以选择的值，所以我选择了

1

认为这会简化事情）。

这是代码的模拟 Sass 版本：

$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>

我错过了什么？在这种情况下，一个字母占据多少垂直空间？如何调整渐变的大小和位置，以便每个字母后面都有一个渐变？

---

将文本分割成字母，每个字母都包含在一个带有自己的

background

的元素中，这绝对不是一个选项。对此不感兴趣。

Answer 1

使用

line-height

不起作用，因为它会调整水平空间而不是垂直空间

div {
  box-shadow: 0 0 0 6px;
  font: 900 clamp(1em, 18vmin, 18em)/4 monospace;
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-transform: uppercase
}

<div>play</div>

所以我认为您保留了

1.2em

的默认行为，但不确定是否可以依赖它，因为它取决于字体和浏览器实现

取决于用户代理。桌面浏览器（包括 Firefox）使用大约 1.2 的默认值，具体取决于元素的字体系列。 ^参考

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 1.2em, 
    conic-gradient(from -61deg at 92% 2%, #009688, #f44336, #009688) 0 2.4em, 
    conic-gradient(from -5deg at 41% 95%, #8bc34a, #ad1457, #8bc34a) 0 3.6em;
  background-repeat: no-repeat;
  background-size: 100% 1.2em;
  background-position:
   0 calc(0*100%/3),
   0 calc(1*100%/3),
   0 calc(2*100%/3),
   0 calc(3*100%/3);
  font: 900 clamp(1em, 18vmin, 18em)/1 monospace;
  writing-mode: vertical-lr;
  text-orientation: upright;
  text-transform: uppercase
}

<div>play</div>

也就是说，你可以用不同的方式创建同样的东西。有点老套，但在我找到更好的想法之前，这可能是一个很好的解决方法：

div {
  width: 1ch; /* limit the width to one character */
  word-break: break-all; /* allow the word to break */
  padding-inline: .2em;
  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 1lh, 
    conic-gradient(from -61deg at 92% 2%, #009688, #f44336, #009688) 0 2lh, 
    conic-gradient(from -5deg at 41% 95%, #8bc34a, #ad1457, #8bc34a) 0 3lh;
  background-repeat: no-repeat;
  background-size: 100% 1lh;
  background-position:
   0 calc(0*100%/3),
   0 calc(1*100%/3),
   0 calc(2*100%/3),
   0 calc(3*100%/3);
  font: 900 clamp(1em, 18vmin, 18em)/1 monospace;
  display: inline-block;
  margin: 5px;
  vertical-align: top;
  text-transform: uppercase
}

<div>play</div>
<div style="line-height: 2">play</div>
<div style="line-height: .9">play</div>