css - 字体图标的渲染大小差异

Question

我希望我的图标在我的文本旁边垂直居中，但是有一些奇怪的大小差异使它变得困难。

为什么我的图标字体呈现出这些奇怪的大小差异？

我正在使用 Bootstrap 中使用的图标字体方法（使用伪元素 :before 将内容放入）。

这是<i class='icon'></i>尺寸。

这是<i class='icon'></i>:before 大小。为什么不一样？

HTML：

<h2>
  <i class="ss-picture"></i>
  Creatives
</h2>

CSS：

[class^="ss-"], [class*=" ss-"] {
  vertical-align: text-top;
  padding-right: 5px;
}

.ss-picture:before, .ss-picture.right:after {
  content: '';
}

[class^="ss-"], [class*=" ss-"] {
  font-family: "SSStandard";
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  text-rendering: optimizeLegibility;
  white-space: nowrap;
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  -o-font-feature-settings: "liga";
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

Answer 1

请检查行高和字体大小。

我认为这两个页面属性都不同。