字体家族和字体真棒对齐问题答案

【问题标题】：Font Family & Font Awesome Alignment Issues字体家族和字体真棒对齐问题
【发布时间】：2020-11-11 18:53:04
【问题描述】：

问题背景：

我有一个简单的滑块，可以在其中呈现字体很棒的图标和文本。

问题：

我主要看 Lucida Sans 和 Lucida Sans Unicode 字体。根据我选择的字体，两者之间似乎存在顶部填充错位（或空白）。这些差异意味着我无法提出为所有字体类型提供正确对齐的 CSS。

Lucida Sans - 与文本对齐的图标：

Lucida San Unicode - 未对齐的图标。看起来是文本的顶部填充：

代码：

以下是屏幕截图中显示的项目的 HTML：

<div id="riskAmendments">
   <div id="taskAmendmentWidget1">
      <div class="riskCircleIconHolder"><span class="riskIcon"></span></div>
      <div class="riskDescription">Issue One</div>
      <a id="afc5d6c4-85d4-49e6-9231-565c4b867e62" href="#" class="riskResolveLink">
         <div class="riskSpannerIconHolder"><span class="riskIcon"></span></div>
         Resolve Issue
         <div class="riskChevronIconHolder"><span class="riskIcon"></span></div>
      </a>
   </div>
</div>

CSS：

.riskIcon {
    font-family: FontAwesome;
}

.riskDescription {
    width: 450px;
    padding: 0px 0px 20px 20px;
    display: inline-block;
}

.riskResolveLink {
    float: right;
    padding: 0px 20px 0px 0px;
}

.riskCircleIconHolder {
    float: left;
    padding: 0px 5px 0px 25px;
}

.riskSpannerIconHolder {
    float: left;
    padding: 0px 5px 0px 0px;
}

.riskChevronIconHolder {
    float: right;
    padding: 3px 0px 0px 5px;
}

有没有办法提供一种 CSS 解决方案，将所有图标和文本对齐到各自的字体系列？

【问题讨论】：

标签： html css font-family

【解决方案1】：

有两种解决方案：

.riskIcon {vertical-align:center}

尝试使用行高

.riskSpannerIconHolder {line-height:30px // for example}
.riskSpannerIconHolder .riskIcon {line-height:30px // for example}

【讨论】：

【解决方案2】：

Afaik，这是一个字体限制——它们都有不同的升序和降序尺寸，由设计师决定垂直对齐方式——css 只关心最终的字符高度（包括间距），而不关心如何符号本身位于该高度内。

【讨论】：