@字體面和行高的問題

Question

圖片下面顯示結果：

div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; } 

一個使用Wiesbaden（這是字體面）和其他無。 font-face字體似乎忽略了行高屬性。

難道字體面的問題或字體？

Answer 1

總之，這不是一個問題。他們的行爲完全如何。看到你的藍色背景？這是你的線條高度。行高不會影響字體本身，而是影響文本行的間距。

即使設置爲相同的font-size，某些字體的大小也不同。這是字形呈現的方式。如果您希望文字更大，請增加字體大小。如果您希望回退的大小相同，則可以使用相同大小的字體（查找「字體堆棧生成器」以獲取此幫助），或者查看the CSS3 font-size-adjust property（請注意，它是CSS3，因此您希望將其加倍 - 檢查它的支持）。

Answer 2

屬性line-height只指定一行開始和下一行開始之間的垂直距離。如果您輸入了佔用兩行的內容，則第二行的開頭應該使用任一種字體處於相同的垂直位置。

看來這只是你的字體如何看'font-size：50px'。如果你想，你可以增加font-size，同時保持line-height: 50px來糾正它。

Answer 3

我有類似的問題，但我用Cufon腳本而不是fontface來避免瀏覽器問題。爲了解決我的行高問題，我將文檔類型從transitional改爲strict。試試看。

Answer 4

下面的小提琴演示了4種字體之間的區別（3種是Mac，PC等中常見的常見字體）。一個是Google字體。無論如何，4種字體 - 四種不同的結果。如果設計將嚴重依賴「非標準」字體，請確保回退不會影響整個事物。

要特別注意在差異：

• 資本Q和其父的邊界之間的頂部間距
• 的XX（尤其是小寫與資本）的各種高度
• 伸小寫的G（一些實際上來到其 父出）

_http：//jsfiddle.net/suK2U/