解決方法HTMLのカスタムフォントで行の高さの問題？

Question

カスタムフォント（poppins-regular.ttf）を使用しているときに問題が発生しました。問題は、テキストのラッパーであるspanタグの背景色を設定したときです。

g、y、..などの単語が下に切れています。しかし、フォントファミリをpoppinsRegularからtahomaに変更すると、それはよさそうです。ここ

しかし、本当の問題は、私はあなたが行の高さプロパティを削除するか、try to setするか、同じ行の高さ

.passageBody, .passageBody2 { 
 
    width: 414px; 
 
    padding: 10px 0; 
 
    margin: 0px; 
 
    font-size: 24px; 
 
    line-height: 32px; 
 
    font-family: 'Poppins', sans-serif; 
 
} 
 
.passageBody2 { 
 
    font-family: tahoma; 
 
} 
 
.highlightPhrase { 
 
    background-color: yellow; 
 
}

<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet"> 
 

 
<div class="passageBody"> 
 
    <span>“Good-bye to you and your funny feet.</span> 
 
    <span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span> 
 
</div> 
 
<hr/> 
 
<div class="passageBody2"> 
 
    <span>“Good-bye to you and your funny feet.</span> 
 
    <span class="highlightPhrase">Thanks for all the eggs to eat!” I was speaking to Bess, our chicken, and Mother laughed.</span> 
 
</div>

Example jsFiddle link here...

Answer 1

を維持する必要がありますされ、それem単位です。

line-height: 1.5em; 

編集1

あなたは、行の高さを変更したくない場合は、インライン表示で垂直整列を使用

.highlightPhrase { 
    background-color: yellow; 
    display: inline; 
    vertical-align: text-bottom; 
} 

編集2 上記のコードは、必要がある場合があります線の高さを視覚的に変更しました。だからthis exampleはあなたの問題に対する洗練された解決策かもしれません。別の要素にコンテンツをラップして相対位置に設定するだけで、各行の背景が上記の行を隠すことはありません。

.highlightPhrase span { 
    position:relative; 
} 

または、小さな画像を背景として使用してテキスト全体をハイライト表示することができます。

Answer 2

変更： line-height: 32px;line-height: auto;へ

Answer 3

問題は、ここではグリフの垂直方向の配置です。 デザイナーは、そのようなフォントグリフを設定することに決めました。

基本的にデザイナーは、ベースラインの下にどれくらいのスペースがあり、スペースが大文字の高さを上回っているかを決めました。通常、これらのスペースは同じですが、必ずしも同じである必要はありません。

あなたのための唯一の解決策は、そのフォントを使用している段落に大きなline-heightを置くか、別のフォントを選択することだと思います。

Answer 4

私は覚えているとして、この

.highlightPhrase { 
    padding:5px; 
}