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

Question

我必须将文本并排放置，第一个是粗体，下一个是正常字体粗细。但是文本底部没有对齐，正常字体粗细的文本在 Chrome 中大约向上 1 px。

一种解决方案是在具有正常字体粗细的文本上使用 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>