CSS3 font-size
簡介
在設計網頁或寫文章時，常常藉著改變字型、字體及字的大小和顏色等等技巧，以標示文章中的標題，或凸顯某一段文字，在在都是為了讓讀者易於閱讀。而在網路的中文環境中，因為中文在字數的龐大，造成中文字型檔的體積碩大，下載耗時，加以各作業系統預設所提供的中文字型，不論在數量上或字體上都不一致，使得中文在撰寫跨作業系統的網頁應用上能使用的字體相當的受限，只能靠其它的技巧來彌補。這篇探討如何在網頁中改變字型的大小的技巧。
在 CSS3 中改變字型大小的是 font-size 屬性，這個屬性可以使用多種不同的單位，這些單位分成「絕對單位」(absolute) 及「相對單位」(relative) 兩大類，共 15 種，絕對單位有 6 種，相對單位有 9 種。這裡只講解常用的絕對單位 2 種，相對單位 3 種。分別敘述如下：
絕對單位
元件在設定 font-size 時使用這些絕對單位，流覽器在呈現元件時會以固定大小呈現，不受到其它元件設定的影響。
- px
- px 是pixel 的縮寫，表示像素，也是所有其它單位的基本單位，其它單位最終通常都會轉成以 px 為基準。這是網路程式設計師最常用的絕對單位，很直覺，1px 就是螢幕上的一個像素。流覽器一般預設的字型大小，就是 16px。
- pt
- pt 是 point 的縮寫，是出版業者在排版時常用的單位。12 pt 約等於 16px。大多數文書處理器，像 Microsoft Word 裡用的單位就是 pt。
相對單位
元件在設定 font-size 時使用這些相對單位，流覽器在呈現元件時會參考到其它元件對 font-size 的設定。
- em
- em 是 element 的縮寫。1em 就是 1 個 element 的大小，1.5em 就是1.5 倍 element 的大小。在某元件中設定
font-size= 1em;，在螢幕上到底以多少 px 的大小呈現，完全取決於元件在 DOM tree 中的位置，以及其先輩元件對 font-size 屬性的設定；也就是說，流覽器會從該元件的父輩元件開始回遡，一直回遡其直屬先輩直到 <html> 為止，若在回遡途中有任何一先輩元件有明確的設定字型的大小，也就是說以絕對單位設定，則停止回遡，以該先輩的設定字型大小為 1em 進行計算。若先輩的設定也是以相對單位，則繼續往上回遡，這過程有點像「遞迴」 (recursive) 。若一直回遡至 <html>，而回遡途中都沒有任何一先輩元件有明確的設定 font-size 屬性，則以流覽器的預設字型大小，也就是以 16px 為基準計算。 - rem
- rem 是 root element 的縮寫。其計算方式和 em 相同，唯一的不同點是 rem 不進行先輩回遡，直接以 <html> 中的 font-size 設定作為基準進行計算。若 <html> 中也沒有設定，則以流覽器的預設值 16px 作為基準。
- %
- 百分比表示式。這個單位的計算方式和 em 完全相同，也會進行回遡。其實，
font-size=150%;和font-size:1.5em;這兩種設定，得到的字型大小是一樣的。就算在計算過程中有小數上的落差，人眼也看不出來。
範例
範人例中顯示了三段文字，前二段文字的大小是一樣的，第三段文字則比較大，主要在展示設定 font-size 時，使用 em 和 rem 所得到的結果。字體用的是黑體字，純粹是個人喜好，我認為細明體及新細明體的字體都太單薄，黑體字看起來比較紮實點。而且現在多數的作業系統預設都有提供黑體字。不過黑體字因為厚重，字與字的間距如果不寬，則顯得黑黑的一片，這是黑體字的缺點。
CSS
<style>
html {
width:100%;
font:normal normal normal 16px Arial, '文泉驛正黑', 'WenQuanYi Zen Hei', '儷黑 Pro', 'LiHei Pro', '微軟正黑體', 'Microsoft JhengHei';
}
body {
width:600px;
margin: 0 auto;
padding-top: 20px;
}
.newSize {
font-size: 1.5em;
}
.useRem {
font-size: 1rem;
}
.useEm {
font-size: 1em;
}
</style>
html{} 中設定了所要使用的字體，也明確的設定了字型的大小為 16px。
.newSize{} 調整了字型的大小為 1.5em 若回遡之後，計算結果為 24px。
.useRem{} 使用 rem 為單位，會直接參考到 html{} 中的設定，計算結果應該是 16px。
.useEm{} 使用 em 為單位，因為在 HTML 程式碼中，.newSize{} 為 .useEm{} 的父輩，所以會參考到 .newSize{} 的設定，1em 的計算結果為 24px。
HTML
<body>
寒蟬凄切，對長亭晚，驟雨初歇。都門帳飲無緒，方留戀處，蘭舟催發。執手相看淚眼，竟無語凝咽。念去去，千里煙波，暮靄沉沉楚天闊！多情自古傷別離，更那堪冷落清秋節！今宵酒醒何處？楊柳岸，曉風殘月。此去經年，應是良辰好景虛設，便縱有千種風情，更與何人說。
寒蟬凄切，對長亭晚，驟雨初歇。都門帳飲無緒，方留戀處，蘭舟催發。執手相看淚眼，竟無語凝咽。念去去，千里煙波，暮靄沉沉楚天闊！多情自古傷別離，更那堪冷落清秋節！今宵酒醒何處？楊柳岸，曉風殘月。此去經年，應是良辰好景虛設，便縱有千種風情，更與何人說。
寒蟬凄切，對長亭晚，驟雨初歇。都門帳飲無緒，方留戀處，蘭舟催發。執手相看淚眼，竟無語凝咽。念去去，千里煙波，暮靄沉沉楚天闊！多情自古傷別離，更那堪冷落清秋節！今宵酒醒何處？楊柳岸，曉風殘月。此去經年，應是良辰好景虛設，便縱有千種風情，更與何人說。
</body>
HTML 中，建立一個 <div> 其 CSS 類別為 .newSize。其子輩有二個 <p> 標記，在 CSS 類別中分別用 rem 及 em 作為單位為設定其 font-size，藉以觀察設定後字型大小的計算及變化。
沒有留言:
張貼留言