呈现字体图标的大小差异

Question

我希望我的图标在我的文字旁边垂直居中，但是存在奇怪的尺寸差异使得它变得困难。

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

我正在使用Bootstrap中使用的图标字体方法（使用psuedo元素：之前将内容放入）。

这是<i class='icon'></i>大小。

这是<i class='icon'></i>：之前的尺寸。它为什么不同？

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

请检查行高和字体大小。

我瘦两个页面属性都不同。