javascript - 由于字体 : helvetica，粗体和普通文本彼此未对齐

Question

我必须将文本彼此相邻，第一个文本是粗体，下一个文本具有正常的字体粗细。但是文本底部没有对齐，正常字体粗细的文本在 Chrome 中大约向上 1 像素。

一种解决方案可能是在具有正常字体粗细的文本上使用 margin-top: 1px; 来补偿此问题，但由于字体的原因，Firefox 和 Chrome 似乎以不同的方式处理此问题:

字体系列:Helvetica Neue、Helvetica、Arial、sans-serif；

任何建议如何在没有浏览器特定 CSS 且不更改字体的情况下解决此问题。

在 FF 和 Chrome 中打开此示例:Fiddle

HTML:

.bold-text, .normal-text {
   display: inline-flex;
   font-size: 12px;
}

.top-wrapper {
   margin-top: 2px;
   display: flex;
   flex-direction: row;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
}

.bold-text {
   font-weight: bold;
   max-width: 115px;
 }

 .normal-text {
   color: #777;
   margin-left: 3px;
 }

<div class="top-wrapper">
    <div class="bold-text">some random text</div>
    <div class="normal-text">6 days ago</div>
</div>

Answer 1

在 Flexbox 中添加 align-items: center;

.bold-text, .normal-text {
   display: inline-flex;
   font-size: 12px;
}

.top-wrapper {
   margin-top: 2px;
   display: flex;
   flex-direction: row;
   font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
   align-items: center;
}

.bold-text {
   font-weight: bold;
   max-width: 115px;
 }

 .normal-text {
   color: #777;
   margin-left: 3px;
 }

<div class="top-wrapper">
    <div class="bold-text">some random text</div>
    <div class="normal-text">6 days ago</div>
</div>