2010-04-20 45 views
3

我正在研究一個WordPress,它將允許網站管理員在無襯線字體和襯線字體之間切換。CSS - 我如何處理serif和sans-serif字體之間的大小差異?

我試圖以這樣的方式編碼樣式表,字體大小是否相似,無論他們選擇格魯吉亞還是Arial。

問題是,當我用襯線字體看起來不錯時,它看起來太大,當在無襯線。然後當我用無襯線字體調整它看起來不錯時,它看起來在襯線上太小了。

是否有一個理想的字體大小和行高,適用於serif和sans-serif?

還是需要製作單獨的樣式表(一個農奴版本和一個無襯線版本)?

P.S.我已經在主體上設置了12px的基本字體大小,然後將其餘字體大小設置爲基本百分比。當然,這個基本字體大小可以用ems或百分比來設置,因爲百分比仍然會按比例縮放。

回答

2

您遇到的問題與不同字體的不同相對x高度有關,這只是在技術術語中重複您的原始問題:Georgia @ 12px不等於Arial @ 12px。這是由於字體的方面價值。

有一個css3屬性「font-size-adjust」,它理論上將所有字體的x高度均衡爲您指定的字體的高度,但我不確定它是廣泛支持還是支持。你可以閱讀一下@http://www.fonttester.com/help/css_property/font-size-adjust.html

你可以看看這個頁面,其中有一個JavaScript的解決方案:

http://www.brunildo.org/test/xheight.pl

最後,對於你的問題的W3文件:

http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

希望有些幫助。

1

嗯,首先我會使用時間,除非你有令人信服的理由使用%。同樣在12px的基本字體大小,我喜歡設置我的線高度爲1.25或1.5 em(15或18像素)。然後你需要找到一個近似於無襯線的間距的襯線字體,反之亦然。如果你研究「字體堆棧」,你可以找到一些很好的信息,說明什麼樣的字體可以一起使用。

+0

感謝您的回答。使用百分比vs ems有什麼好理由?另外,你認爲最好是在主體上設置一個基線高度還是讓每個元素都有自己的無單位線高? – orbit82 2010-04-20 03:29:07

0

感謝您的答案。這裏非常有用的信息。我學習了一些關於字體堆棧和我以前不知道的相對大小的東西。我將爲用戶提供更改字體大小的功能,並「調整」它們以符合他們的喜好。

相關問題