CSS

Question

我正在使用 react-textfit 自动缩放文本以适应特定宽度和高度的 div（这是 window 的百分比）。我正在使用的字体有一个巨大的下降（底部的空白）。因此，尝试将与此文本内联的其他元素居中是很困难的。由于此文本的大小会根据屏幕大小而变化，因此我无法手动更改 line-height 来解决此问题。此外，使用变量 line-height 不起作用，因为字体没有以文本为中心。

例如，在此图像中，您可以看到字符下方有大量空白。

可变行高 (70%) 也无济于事，因为底部的空格被视为字符本身的一部分。因此，字符未在 div 中垂直居中，这是预期的结果。用像素值手动设置行高也同样失败。

因为字符下方有空格，所以应该与文本一起垂直居中的内联元素被向下移动。

标题连同包含的内联元素包含在以下内容中 div:

.title {
  width: 100%;

  margin-left: 4vw;

  height: 20vmin;
  display: inline-block;

  display: flex;
  align-items: center;
}

标题本身，在下面div:

.title .text {
  height: 20vmin;
  font-weight: bold;
  display: inline-flex;

  align-items: center;

  line-height: 1;
}

react-textfit 还会在运行时给 .title .text 以像素为单位的 font-size，因此它适合 20vmin 的 height 和 width 共 80%

最后，react-textfit 会将文本包装在另一个 div 中，样式如下：

display: block;
white-space: nowrap;

基本上，在运行时，这就是整个事情的样子：

<div class="title">
    <div class="text">
        <div style="display: block; white-space: nowrap">TITLE</div>
    </div>
    <div class="some-other-element-that-should-be-vertically aligned">...</div>
</div>

是否可以使用 CSS 删除文本底部多余的空白，以便其他元素可以与其垂直对齐？

示例项目（使用普通 HTML，而非 React）：https://codesandbox.io/s/29-fonts-forked-vuvdx?file=/fonts.css

Answer 1

根据您的代码和框，我会尝试使用 em 单元，这样所有内容（边距、填充、字体大小等）将始终相对于元素 (title ) 字体大小：

.box {
  font-size: 0.5em;
  border: 0.1em solid black;
  height: auto;
  white-space: nowrap;

  margin: 0 0.1em 0;

  ...
}

.box span {
  margin-top: 0.2em;
}

CSS - 动态删除字体降序

CSS - Dynamically Remove Font Descender

fonts

reactjs