粗體和正常文本彼此相鄰未對齊，因爲字體：helvetica

我必須相互緊挨着，第一個是粗體，下一個是正常的字體重量。但文字底部不對齊，正常字體重量的文字在Chrome中大約爲1 px。粗體和正常文本彼此相鄰未對齊，因爲字體：helvetica

一種解決方案可能是與普通字體的重量，但Firefox和Chrome的文字與margin-top: 1px;來彌補這似乎處理不同，因爲字體是：

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>

來源

2017-04-20 Jonathan Andersson

嘗試給文字陰影像文字陰影。中性文本類：0像素1px的0像素＃777;爲了製作相同的線.... –

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

添加

來源

2017-04-20 08:39:46

感謝隊友，完美的作品！ –

很高興幫助你:) –

對於我

Helvetica Neue Regular 


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

正在更換

Helvetica Neue

。

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

來源

2017-04-20 08:40:24 RacoonOnMoon

粗體和正常文本彼此相鄰未對齊，因爲字體：helvetica

回答

相關問題