如何抵消行高基線？

這是一個非常普遍的問題，與font-face，例如如何抵消行高基線？

font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase;

enter image description here

的問題是，我所期待的文本垂直居中。但事實並非如此。有沒有辦法來抵消行高基線？沒有實際改變line-height。

來源

2012-01-17 Gajus

現象取決於字體。由字體設計師來決定字體如何使用其高度。例如在Arial中，當設置爲固定時，大寫的基本拉丁字母是垂直居中的，而在Verdana中，它們看起來有點低（即比上面多一點空間）。

您可以使用相對定位對其進行微調，但需要額外的標記，例如，

<div><span>text</span></div>

與CSS的span設置，也就是說，

position: relative; 
top: 2px;

這可能會導致討厭的影響，如果在用戶的瀏覽器中使用的字體是與你的期望不同。

我沒有考慮font-style: 'book'的可能影響，因爲我不知道它的含義。沒有我知道的CSS資源提到類似的東西（font-style值是不加引號的關鍵字，不包括book）。

來源

2012-01-17 23:58:22

只是爲了讓你知道，'font-style：'book''引用了一個樣式爲'book'的字體家族成員。感謝關於相對定位的提示。問題是，例如，在Opera上，字體按預期顯示，即。垂直居中。因此，像您一樣應用修補程序不會使其跨瀏覽器兼容。這也讓它看起來好像這不是字體問題？ – Gajus 2012-01-18 02:00:39

如何抵消行高基線？

回答

相關問題