確定字體大小的方法對我們來(lái)說(shuō)既很熟悉,也有很大不同。
與font-weight關(guān)鍵字bolder和lighter的方式類(lèi)似,屬性font-size也有兩個(gè)相對大小關(guān)鍵字:larger和smaller。類(lèi)似于相對字體加粗,這些關(guān)鍵字會(huì )導致font-size的計算值上移或下移,在討論larger和smaller之前需要先了解這一點(diǎn)。不過(guò),首先需要分析如何確定字體的大小,實(shí)際上,font-size屬性與你看到的實(shí)際字體大小之間的具體關(guān)系由字體的設計者來(lái)確定。這種關(guān)系設置為字體本身中的一個(gè)em方框(有人也稱(chēng)之為em框)。這個(gè)em方框(以及相應的字體大?。┎灰欢ㄖ甘咀煮w中字符建立的任何邊界。相反,它指示如果沒(méi)有額外行間距(CSS中的line-height)設置字體時(shí)基線(xiàn)間的距離。某種字體的字符可能比默認的基線(xiàn)間距離要高,這是完全有可能的。出于這種原因,定義字體時(shí)可能要求所有字符都小于其em方框,很多字體就是這樣做的。
因此,font-size的作用是為給定字體的em框提供一個(gè)大小,而不能保證實(shí)際顯示的字符就是這種大小。
絕對大小
有了以上了解,現在來(lái)看絕對大小關(guān)鍵字。font-size有7個(gè)絕對大小值:xx-small、 x-small, small, medium, large, x-large和xx-large。這些關(guān)鍵字并沒(méi)有明確地定義,而是相對地來(lái)定義。
p.one {font-size: xx-small;}
p.two {font-size: x-small;}
p.three {font-size: small;}
p.four {font-size: medium;}
p.five {font-size: large;}
p.six:{font-size: x-large;}
p.seven {font-size: xx-large;}
根據CSS1規范,一個(gè)絕對大小與下一個(gè)絕對大小之間的差別(或縮放因子)應當是向上1.5,或向下0.66。因此,如果medium等于10px,那么large就應當等于15px。另一方面,縮放因子不一定非得是1.5,不僅因為對于不同的用戶(hù)代理縮放因子可能不同,此外還有一個(gè)原因:CSS2中縮放因子可能介于1.0-1.2之間。
假設medium等于16px,在此基礎上,對于不同的縮放因子,可以得到表5-3所示的絕對大?。ó斎?,下面的值是近似的)。
在不同的網(wǎng)頁(yè)瀏覽器將“默認”字體大小指定為不同的絕對關(guān)鍵字時(shí),情況會(huì )更復雜。以版本4的瀏覽器為例:Navigator 4認為medium與無(wú)樣式文本的字體大小相同,而Internet Explorer 4則認為small文本與無(wú)樣式文本的大小相同。盡管font-style的默認值一般認為是medium,但IE4的行為可能不正確,不過(guò)沒(méi)有最初看起來(lái)那么嚴重(注1)[1]。幸運地是,IE6修正了這個(gè)問(wèn)題,至少瀏覽器在標準模式時(shí)會(huì )把medium作為默認大小。
相對大小
相對來(lái)講,關(guān)鍵字larger和smaller很簡(jiǎn)單:這兩個(gè)關(guān)鍵字使元素的大小相對于其父元素的大小在絕對大小梯度上上移或下移,在此會(huì )使用計算絕對大小時(shí)采用的縮放因子。換句話(huà)說(shuō),如果瀏覽器使用縮放因子1.2來(lái)計算絕對大小,那么在應用相對大小關(guān)鍵字時(shí)也應當使用同樣的縮放因子:
p {font-size: medium;}
strong, em {font-size: larger;}
<p>This paragraph element contains <strong>a strong-emphasia element which itself contains <em>an emphasis element that also contains <strong>a strong element.</strong></em></strong></p>
<p> medium <strong>large <em> x-large <strong>xx-large</strong></em></strong></p>
不同于加粗的相對值,相對大小值不必限制在絕對大小范圍內。因此,一個(gè)字體的大小可以超過(guò)xx-small和xx-large的大小。例如:
h1 {font-size: xx-large;}
em {font-size: larger;}
<h1>A Heading with <em>Emphasis</em> added</h1>
<p>This paragraph has some <em>emphasis</em> as well.</p>
如圖5-11所示,h1元素中的強調文本比xx-large稍微大一點(diǎn)??s放的程度由用戶(hù)代理決定,往往就是縮放因子1.2。當然,段落中的em文本會(huì )在絕對大小梯度上上移一步(large)。
注意:網(wǎng)頁(yè)瀏覽器不需要將字體大小增加或減少到超出絕對大小關(guān)鍵字的限制。
百分數和大小
在某種程度上講,百分數值與相對大小關(guān)鍵字很相似,百分數值總是根據從父元素繼承的大小來(lái)計算。不同于相對大小關(guān)鍵字,百分數允許對計算的字體大小有更細的控制??紤]以下例子,如圖5-12所示:
body {font-size: 15px;}
這個(gè)例子中顯示了具體的像素大小值。實(shí)際中,Web瀏覽器很可能將這個(gè)值取整為與之最接近的整數像素,如14px,不過(guò)高級用戶(hù)代理在打印文檔時(shí)會(huì )近似小數像素,或者可能通過(guò)反混淆(anti-aliasing)來(lái)近似小數像素。對于其他font-size值,瀏覽器可能保留小數(也可能不保留)。
有時(shí),CSS定義長(cháng)度值em等價(jià)于百分數值,即確定字體大小時(shí)1em等于100%。因此,以下會(huì )得到相同的結果(假設兩個(gè)段落有相同的父元素):
p.one {font-size: 166%;}
p.two {font-size: 1.6em;}
在使用em度量時(shí),會(huì )應用百分數的相同規則,如計算大小的繼承規則等等。
字體大小和繼承
盡管在CSS中font-size是可以繼承的,不過(guò)繼承的是計算值而不是百分數,如圖5-12 所示。因此,strong元素繼承的值是12px,根據聲明值135%,繼承的這個(gè)值修改為16.2px (這很可能取整為16px)。對于“腳注”段落,百分數相對于由body元素繼承的font-size值來(lái)計算,即15px。將這個(gè)值乘以75%就得到11.25px,
與相對大小關(guān)鍵字一樣,百分數可以積累。因此,以下標記顯示為如圖5-13所示:
p {font-size: 12px;}
em {font-size: 120%;}
strong (font-size: 135%;}
<p>This paragraph contains both<em>emphasis and <scrong>strong
emphasis</strong></em>, both of which are larger than the paragraph text.</p>
<p> 12px <em>14.4px <strong> 19.44px </strong></em> 12px </p>
圖5-13中strong元素的大小值計算如下:
12 px x 120%= 14.4px
14.4px x 135%= 19.44px (可能取整為19px)
不過(guò),這只是一種候選情況,最終值可能稍有不同
。在這種情況下,用戶(hù)代理對像素大小進(jìn)行取整,取整后的值再由子元素正常繼承。盡管根據規范這種行為可能并不正確,不過(guò)我們假設用戶(hù)代理會(huì )這么做。因此,會(huì )有:
12px x 120%= 14.4px [14.4px ≈ 14px]
14px x 135%= 18.9px [18.9px ≈ 19px]
如果有人認為用戶(hù)代理每一步都完成取整,那么這個(gè)計算和前一個(gè)計算的最終結果是一樣的:都是19像素。不過(guò),如果與更多的百分數相乘,取整錯誤就會(huì )開(kāi)始積累。
縮放失控的問(wèn)題還可能朝著(zhù)另一個(gè)方向發(fā)展。下面來(lái)考慮一個(gè)文檔,這個(gè)文檔中只有一系列無(wú)序列表,其中很多列表嵌套在另外的一些列表中。有些列表的嵌套多達4層。假設對這樣一個(gè)文檔應用以下規則,可以想象一下最后的效果:
ul (font-size: 80%;}
對于一個(gè)4層嵌套,嵌套最深的無(wú)序列表的font-size計算值將是頂層列表父元素大小的40.96%。每個(gè)嵌套列表的字體大小都是其父列表字體大小的80%,這就導致一層比一層難讀。如果一個(gè)文檔使用嵌套表來(lái)建立布局,也可能發(fā)生類(lèi)似的問(wèn)題。你可能會(huì )把規則寫(xiě)作:
td {font-size: 0.8em;}
不論怎樣,都可能得到一個(gè)無(wú)法閱讀的頁(yè)面。
使用長(cháng)度單位
可以使用第4章詳細討論的任何長(cháng)度值來(lái)設置font-size。以下所有font-size聲明都是等價(jià)的:
p.one (font-size: 36pt;}
p.two {font-size: 3pc;}
p.three {font-size: 0.5in;}
p.four (font-size: 1.27cm;}
p.five {font-size: 12.7mm;}
圖5-14假設用戶(hù)代理知道顯示媒體中毎英寸使用多少點(diǎn)。不同的用戶(hù)代理會(huì )做不同的假設,有些基于操作系統,有些基于首選頂設置,還有些會(huì )基于編寫(xiě)用戶(hù)代理的程序員的假設。不過(guò),這5行應該始終有相同的大小。因此。盡管結果與現實(shí)可能不能完全匹配(例
如,p.three的實(shí)際大小可能不是半英寸)。但是度量彼此之間是一致的。
還有一個(gè)值可能與圖5-14所示大小相同,即36px,如果顯示媒體是72 ppi (pixels-per-inch,每英寸像素數),那么物理距離就可能一樣。不過(guò),有這種設置的顯示器并不多。大多數顯示器都有更高的分辨串,范圍為96ppi-120ppi。許多較老的Macintosh Web瀏覽器把點(diǎn)和像素看成是一樣的,所以在這些瀏覽器上,值14pt和14px看上去可能一樣。不過(guò),對于Windows和其他平臺(包括Mac OS X)卻不是這樣。正因如此(這是一個(gè)主要原因),所以我們說(shuō)在文檔設計中點(diǎn)很難使用。
當前文章標題:字體大小設置
當前URL:http://amzcoolest.com/news/wzzz/font-size-setting.html
上一篇:字體的加粗設置