フォントのために太字と通常のテキストが整列していないため、次のようになります。helvetica

Question

テキストが隣り合っていなければなりません。最初の文字は太字で、次の文字は通常のフォントウェイトです。しかし、テキストの下部が揃っていないため、通常のフォントの重さのテキストはChromeで約1ピクセル上になります。

一つの解決策は、通常のフォントの太さを持つテキストに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

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

フレキシボックスに​​を追加私は

Helvetica Neue Regular 


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

と

Helvetica Neue 

を交換するために3210

Answer 2

が働いています。

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