如何在CSS中指定字體大小，以便它們匹配模型並允許調整大小？

我們正在運行到我們如何指定的字體大小的問題。如果我們使用pt指定字體大小，它們在瀏覽器/平臺上並不總是相同的。如果我們使用px指定字體大小，則IE6用戶無法調整文本大小。如何在CSS中指定字體大小，以便它們匹配模型並允許調整大小？

2008-10-17 ScottKoon

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

來源

2008-10-17 18:52:45

價值觀爲‘行高’特性並不需要指定一個單位。行高已經相對於字體大小，所以無單位的行高與ems中指定的相同。所以'line-height：1.125em''與'line-height：1.125'相同 – 2009-02-27 17:55:43

你應該總是使用相對單位的字體大小，如他們。

來源

2008-10-17 17:48:34

http://developer.yahoo.com/yui/fonts/#fontsize（編輯：我相信這是假定其基CSS，但它是假設的13像素的基大小;我相信甚至IE適當調整大小，其中百分比是針對一個像素尺寸測量百分比尺寸的文本）

也就是說，如果您嘗試匹配圖形模型，但即使只是瀏覽器到瀏覽器，文本渲染中的東西也會有所不同，您將永遠無法獲得像素完美的字體大小，如果您想要匹配圖形模型，則可以使用，尤其是。

來源

2008-10-17 17:50:10 eyelidlessness

除非您使用px，否則您總是會遇到匹配模型的麻煩。 http://www.456bereastreet.com/archive/200602/setting_font_size_in_pixels/
我不覺得有什麼特別的錯誤使用像素爲您的網頁。特別是因爲幾乎所有的現代瀏覽器（除webkit外）都使用縮放而不是默認的文本大小調整。

我還是會堅持到什麼彌敦道建議，因爲它可以讓你更多的設計靈活性，因爲你可以快速改變僅其中一個縮放整個網站的字體大小。但是，如果你很懶，或者想要真正發現，那麼你不必擔心px。

來源

2008-10-17 22:52:31

相反的是別人已經回答了，你永遠也不會使用的字體大小的像素。 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;}

來源

2008-10-18 08:41:48 cowgod

如何在CSS中指定字體大小，以便它們匹配模型並允許調整大小？

回答

相關問題