css - 不同的 Material Icons 样式不对齐

Question

我在我的应用中使用了 Google 的 Material Design 图标。目前至少需要两种样式:常规(填充)图标和轮廓图标。问题是，这两种风格不一致!

如果您查看此输出，会发现常规图标和带轮廓图标的高度不同，原因不明。通过在检查器中检查它们，您可以看到边界框确实不同(对于轮廓图标，它们似乎比需要的要低)。

.icon {
  vertical-align: middle;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<i class="icon material-icons">person</i>
<i class="icon material-icons-outlined">person</i>
<i class="icon material-icons">home</i>
<i class="icon material-icons-outlined">home</i>

是否有一种解决方法可以应用于 .material-icons-outlined 类一次以确保它们在任何地方都正确定位？

margin-bottom: -1em 适用于基本情况，但图标用于许多不同的上下文，有时(例如，当他们的 parent 需要缩小到他们的行高时)这个解决方案失败。

或者，有没有一种工具可以快速修复字体并使其字符显示在所需的高度上？

更新:这似乎只在我的 Windows 8.1 上是个问题。这些图标在 Windows 10 上对齐。这在任何浏览器中都可以重现。

更新(2):也就是说，这两种字体之间显然存在一些差异。带轮廓的图标在较旧的 iOS 版本上不起作用(仅显示其名称而不是图标)，而常规图标则运行良好。

Answer 1

您可以使用 flex(甚至网格)将它们居中对齐。

.icon-wrapper {
  display: flex;
  align-items: center;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

<div class="icon-wrapper">
  <i class="icon material-icons">person</i>
  <i class="icon material-icons-outlined">person</i>
  <i class="icon material-icons">home</i>
  <i class="icon material-icons-outlined">home</i>
</div>