粗体和普通文本彼此相邻，因为字体未对齐：helvetica

Question

我必须将文本彼此相邻，第一个是粗体，下一个具有正常的字体粗细。但文字底部未对齐，在Chrome中，具有正常字体粗细的文字大约增加了1 px。

一种解决方案是用margin-top: 1px;具有正常字体粗细的文本来补偿此问题，但是由于字体，firefox和chrome似乎处理不同：

font-family: 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

align-items: center;在flexbox中添加

.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>