对齐 font-variant: smallcaps 与其他元素

Question

我在垂直对齐元素时遇到一点问题，如图所示：

也就是说，当 font-variant: smallcaps 生效时，包含文本的跨度不再与旁边的图标“居中”，由于图标的大小，“字体”越大，这一点就越明显按字体大小。

我尝试将跨度转换为 display:block 元素，但无法使其与 vertical-align: middle 一起使用，我尝试将其转换为 display: flex 并使用 [=16] =].没有成功，似乎只有显示“脱节”，而内部文本大小合适。你会如何解决这个问题？

Fiddle: https://jsfiddle.net/1nzhgymf/

.menu-item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;

  width: 100%;
  height: 2.8em;
  color: inherit;
  text-decoration: none;
  text-transform: uppercase;
  font-family: Roboto;
  font-size: 20px;

  flex-grow: 0;
  flex-shrink: 0;

  padding: 0.4em;
}

 .icon {
    min-width: 1em;
    min-height: 1em;
    background: red;
      margin-right: 0.4em;
  }

<div>
  <a class="menu-item">
    <div class="icon"></div>
    <span>Example</span>
  </a>
  <a class="menu-item" style="font-variant: all-small-caps">
    <div class="icon"></div>
    <span>Example</span>
  </a>
</div>

Answer 1

最初尝试在这里回答的错误结论是字体的 em 大小受 CSS font-variant 中的 all-small-caps 影响。事实并非如此（当然不应该是，一个 em 被固定为 font/font 大小）但我保留这个答案而不是删除它，因为发问者提出了一些有用的评论。

这里再尝试解释一下：

所述问题是垂直对齐元素的问题。给出了一个全大写单词的示例，其对齐方式与设置为 all-small-caps 的单词不同。在下面的屏幕截图中，您可以看到这方面的变化 - 一行全是小写字母或全是小型大写字母的行似乎比大写字母的示例更靠下。

在某种意义上这是对的——在大写的例子中，中线穿过大写的 E 和 X 的中间，这使得它关于这条线是平衡的。在 all-small-caps 示例中，虽然首都的中心已经下降到中线以下。图像中的最后一行显示了为什么这是必要的 - 否则混合文本会上下波动。

对齐 font-variant: smallcaps 与其他元素

Aligning font-variant: smallcaps with other elements

css

smallcaps