我們正在運行到我們如何指定的字體大小的問題。如果我們使用pt指定字體大小,它們在瀏覽器/平臺上並不總是相同的。如果我們使用px指定字體大小,則IE6用戶無法調整文本大小。如何在CSS中指定字體大小,以便它們匹配模型並允許調整大小?
回答
An article on A List Apart(2007年11月),在各種瀏覽器探討了這一深度,並得出結論:
漿紗文字和EMS行高,與人體中指定的百分比(和Safari瀏覽器2可選的警告)被證明能夠在當今所有常用瀏覽器中提供準確,可調整大小的文本。這是一種技巧,您可以將它放入工具包中,並將其用作用於CSS大小的最佳實踐,以滿足設計師和讀者的需求。
他們提供screen shots該技術在大多數流行的瀏覽器中的樣子。以下是他們使用的代碼:
<style type="text/css">`
body {
font-size:100%;
line-height:1.125em;
}
.bodytext p {
font-size:0.875em;
}
.sidenote {
font-size:0.75em;
}
</style>
<!--[if !IE]>-->
<style type="text/css">
body {
font-size:16px;
}
</style>
<!--<[endif]-->
你應該總是使用相對單位的字體大小,如他們。
http://developer.yahoo.com/yui/fonts/#fontsize(編輯:我相信這是假定其基CSS,但它是假設的13像素的基大小;我相信甚至IE適當調整大小,其中百分比是針對一個像素尺寸測量百分比尺寸的文本)
也就是說,如果您嘗試匹配圖形模型,但即使只是瀏覽器到瀏覽器,文本渲染中的東西也會有所不同,您將永遠無法獲得像素完美的字體大小,如果您想要匹配圖形模型,則可以使用,尤其是。
除非您使用px,否則您總是會遇到匹配模型的麻煩。 http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
我不覺得有什麼特別的錯誤使用像素爲您的網頁。特別是因爲幾乎所有的現代瀏覽器(除webkit外)都使用縮放而不是默認的文本大小調整。
我還是會堅持到什麼彌敦道建議,因爲它可以讓你更多的設計靈活性,因爲你可以快速改變僅其中一個縮放整個網站的字體大小。但是,如果你很懶,或者想要真正發現,那麼你不必擔心px。
相反的是別人已經回答了,你永遠也不會使用的字體大小的像素。 Internet Explorer 6仍然有一大塊瀏覽器市場派,它絕對不會調整用像素大小指定的文本(如問題中提到的那樣)。你應該總是努力使用「em」。
我使用了一種類似於其他人所建議的技術,通過這種技術我可以「重置」CSS中的所有樣式,以消除任何瀏覽器與字體大小和位置不一致的問題。我喜歡eric meyer's reset reloaded款式作爲基地。如果你想挖掘整個圖書館,你也可以使用yahoo reset css方法。
接下來,我用owen briggs' sane css typography template。您可能會注意到它自2003年以來沒有更新過,但在今天的瀏覽器中仍然絕對可靠。
一旦你得到這個基地,這是一個簡單的事情,改變<body>
標籤上的字體百分比,可以輕鬆地按照相同的方式在網站上縮放所有字體。
的不耐煩,這裏是Eric Meyer的重置CSS和歐文布里格斯排版CSS一起搗碎(通過this excellent css formatter解析):
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;margin:0;padding:0;}
:focus{outline:0;}
body{line-height:1;font-family:verdana, arial, helvetica, sans-serif;font-size:76%;}
ol,ul{list-style:none;}
table{border-collapse:separate;border-spacing:0;}
caption,th,td{text-align:left;font-weight:400;}
blockquote:before,blockquote:after,q:before,q:after{content:"";}
blockquote,q{quotes:"" "";}
a{text-decoration:none;font-weight:700;color:#000;}
a:hover{text-decoration:underline;}
h1{font-size:2em;font-weight:400;margin-top:0;margin-bottom:0;}
h2{font-size:1.7em;font-weight:400;margin:1.2em 0;}
h3{font-size:1.4em;font-weight:400;margin:1.2em 0;}
h4{font-size:1.2em;font-weight:700;margin:1.2em 0;}
h5{font-size:1em;font-weight:700;margin:1.2em 0;}
h6{font-size:.8em;font-weight:700;margin:1.2em 0;}
img{border:0;}
ol,ul,li{font-size:1em;line-height:1.8em;margin-top:.2em;margin-bottom:.1em;}
p{font-size:1em;line-height:1.8em;margin:1.2em 0;}
li > p{margin-top:.2em;}
pre{font-family:monospace;font-size:1em;}
strong,b{font-weight:700;}
- 1. 使用JQuery調整窗口大小調整CSS字體大小
- 2. CSS百分比大小指定大小調整元件超過指定大小
- 3. 如何調整字體大小,以便隨後訪問頁面?
- 4. 如何調整Unicode字符大小以匹配字母字符
- 5. UIWebView中的字體大小與iOS字體大小不匹配
- 6. 字體大小不匹配
- 7. 調整PictureBox的大小以匹配圖像大小
- 8. JButtons沒有調整大小以匹配他們的首選大小
- 9. Android的大小調整的TextView文字大小,以便它是單線
- 10. 調整字體大小的字體真棒字體的大小
- 11. c#窗體:如何匹配backgroundimage大小以形成大小
- 12. 不允許調整窗口大小
- 13. 允許調整大小的窗口pyGame
- 14. CSS:微調字體大小
- 15. CSS3調整大小屬性只允許增加DIV大小
- 16. 調整字體大小FPDF
- 17. 字體調整大小HTML
- 18. 大小調整字體
- 19. 如何在FormLayoutPanel中調整窗體的大小時調整窗體的大小?
- 20. 如何在窗口中調整圖像大小在CSS中調整大小?
- 21. VB.NET調整窗體大小並在TextBox中檢測大小
- 22. 如何允許在PyQt4中調整QMessageBox的大小
- 23. 如何調整字體大小
- 24. 調整div大小時調整字體大小
- 25. 調整SKLabelNode字體大小以適合?
- 26. 調整字體大小以填充UITextView?
- 27. 如何根據div大小按比例調整字體大小
- 28. 如何調整圖片大小的字體大小?
- 29. MD-按鈕調整字體大小以適合按鈕大小
- 30. 如何在隱藏窗口小部件後調整窗口大小,同時仍允許調整窗口大小?
價值觀爲‘行高’特性並不需要指定一個單位。行高已經相對於字體大小,所以無單位的行高與ems中指定的相同。所以'line-height:1.125em''與'line-height:1.125'相同 – 2009-02-27 17:55:43