如何解決在HTML中使用自定義字體的行高問題？

我在使用自定義字體（poppins-regular.ttf）時遇到問題。問題是當我爲span標籤設置背景色時，它是文本的包裝。如何解決在HTML中使用自定義字體的行高問題？

像g，y等等這樣的詞在底部被切掉了。但是，如果我將font-family從poppinsRegular更改爲tahoma，它看起來不錯。

但真正的問題是，我需要保持相同的行高

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

來源

2016-12-05 veerasuthan V

我記得，行高並不需要像單位像素。只是把1.2 1.5或其他 – Obink

謝謝@obink，我給行高度1.3，它仍然顯示相同的問題 –

我認爲Poppins字體有設計行高的問題。我在我們的網站上使用這種字體，並且它不會完全顯示我正在更改行高。 – huykon225

您可以刪除line-height屬性或try to set它在em單位。

line-height: 1.5em;

編輯1

如果你不想改變行高，使用垂直對齊內聯顯示

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

編輯2 上面的代碼可能有在視覺上改變了線條高度。因此this example可能是您的問題的優雅解決方案。只需將內容包裝到另一個元素中，並將該位置設置爲相對，以便每行的背景不會隱藏上面的行。

.highlightPhrase span { 
    position:relative; 
}

或者您可以使用一些小圖像作爲背景並重復它以突出顯示整個文本。

來源

2016-12-05 07:05:27

是的，更改/增加行高解決了這個問題，但我需要保持相同的行高並解決問題。有沒有辦法編輯字體？因爲，它似乎字體包含頂部和底部的一些額外的空間 –

我已經更新了答案，而不更改'行高' –

@veerasuthanV請檢查第二編輯。 –

變化：這裏 line-height: 32px;到line-height: auto;

來源

2016-12-05 07:07:25 sydluce

有沒有辦法解決這個問題，而不改變行高..？ –

您可能需要手動編輯字體;自定義字體可能是越野車。將行高設置爲auto是最好的選擇，它只是一行額外的代碼，所以我沒有看到使用line-height屬性的問題。 – sydluce

'auto'是[[line-height]屬性]（https://developer.mozilla.org/en-US/docs/Web/CSS/line-height）（MDN）的無效值。在Fx和Chr DevTools中進行測試。另外關於字體：它可能不是一個錯誤，而是一個功能©_：這是一個設計師的選擇（這在CSS中很煩人，因爲我們必須在每個字體的基礎上容納，而沒有太多的工具可供我們處理。） – FelipeAls

問題是字形的垂直位置。設計者決定像這樣設置字體字形。

因此，基本上設計者決定了底線以下有多少空間，以及大寫字母高度之上有多少空間。通常這些空間是平等的，但他們不需要。

我認爲只有您的解決方案是將更大的line-height放在使用該字體的段落上，或者只是選擇不同的字體。

來源

2016-12-05 07:16:42 vblazenka

嗨，感謝您的評論..有沒有什麼方法可以編輯自定義字體以及如何刪除額外的空間。因爲，我處於不能行高或字體的情況。但是，不過，我需要解決這個問題，我不知道如何。 –

我從來沒有這樣做，但有字體編輯器，你可以在其中操縱字體。這是免費的：https：//fontforge.github.io/。祝你好運。 :) – vblazenka

試試這個

.highlightPhrase { 
    padding:5px; 
}

來源

2016-12-05 07:35:25

如何解決在HTML中使用自定義字體的行高問題？

回答

相關問題