Question

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

一种解决方案可能是使用margin-top: 1px;对文本进行补偿，使用正常的font-weight，但firefox和chrome似乎因为字体而处理不同：

font-family: Helvetica Neue,Helvetica,Arial,sans-serif;

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

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

HTML：

＆＃13;

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

＆＃13;

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

＆＃13;

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>

Answer 2

我替换

Helvetica Neue

与

Helvetica Neue Regular


font-family: Helvetica Neue Regular,Helvetica,Arial,sans-serif;

正在运作。

.bold-text, .normal-text {
   display: inline-flex;
   font-size: 12px;
}

.top-wrapper {
   margin-top: 2px;
   display: flex;
   flex-direction: row;
   font-family: Helvetica Neue Regular,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>

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

2 个答案: