Wie löst man Zeilenhöhenprobleme mit benutzerdefinierten Schriftarten in HTML?

Question

Ich habe ein Problem bei der Verwendung benutzerdefinierter Schriftart (Poppins-regulary.ttf). Das Problem ist, wenn ich Hintergrundfarbe für span-Tag, die Wrapper von Text ist, festlegen.

Die Wörter wie g, y, .. usw. wurden unten abgeschnitten. Aber, wenn ich die Schriftfamilie von poppinsRegular zu tahoma ändere, sieht es gut aus.

Aber das eigentliche Problem hier ist, muss ich gleiche line-height

.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

Sie entweder die Eigenschaft line-height entfernen halten oder try to set es in em Einheiten.

line-height: 1.5em; 

Edit 1

Wenn Sie nicht wollen, line-height ändern, verwenden Sie vertikale align mit Inline-Anzeige

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

Edit 2 Der obige Code haben könnte änderte visuell die Zeilenhöhe. So könnte this example eine elegante Lösung für Ihr Problem sein. Wickeln Sie den Inhalt einfach in ein anderes Element und setzen Sie die Position auf relativ, so dass der Hintergrund jeder Zeile die obige Zeile nicht verdeckt.

oder Sie können ein kleines Bild als Hintergrund verwenden und es wiederholen, um den gesamten Text hervorzuheben.

Answer 2

Wechsel: line-height: 32px; zu line-height: auto;

Answer 3

Problem hier ist die vertikale Anordnung der Glyphen. Designer entschied sich, die Schriftartglyphen so einzustellen.

Also entschied im Grunde Designer, wie viel Platz es unterhalb der Grundlinie ist, und wie viel Platz über der Höhe von Großbuchstaben ist. Typischerweise sind diese Räume gleich, müssen aber nicht sein.

Ich denke, dass nur die Lösung für Sie ist, größer line-height auf den Absatz, der diese Schriftart verwendet oder einfach eine andere Schriftart wählen.

Answer 4

Versuchen Sie, diese

.highlightPhrase { 
    padding:5px; 
}