說起 font-size ,大家應該都知道是做什么的： CSS 屬性指定字體的大小。因為該屬性的值會被用於計算em和ex長度單位，定義該值可能改變其他元素的大小。
那么font-size 的值也是多種多樣的，除了你所了解的 px ,rem 還有那些呢？下面咱來一起看一下~~~~
/* <absolute-size>，絕對大小值 */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; //默認值 font-size: large; font-size: x-large; font-size: xx-large; /* <relative-size>，相對大小值 */ font-size: larger; //比父元素更大的值 font-size: smaller; // 比父元素更小的值 /* <length>，長度值 */ font-size: 12px; font-size: 0.8em; /* <percentage>，百分比值 */ font-size: 80%; font-size: inherit; //規定應該從父元素那里繼承字體
語法
font-size 屬性以兩種方式之一指定：
- 作為一個從絕對大小absolute-size 關鍵字列表或相對大小relative-size 關鍵字列表中選擇的單個關鍵字。
- 作為一個
<length-percentage>值。
//正式的語法
<absolute-size> | <relative-size> | <length-percentage> where <absolute-size> = xx-small | x-small | small | medium | large | x-large | xx-large <relative-size> = larger | smaller <length-percentage> = <length> | <percentage>
可用方法
有多重定義字體大小的方法，包括了使用關鍵字及使用像素或em數字值。請根據網頁的特定需求選擇適用的方法。
關鍵字
關鍵字是定義網絡字體大小的好方法。通過在body元素上定義關鍵字字體大小，你可以在網頁的任何地方設置相對字體大小，這讓你能輕易地縮放整個網頁的字體大小。
像素
當你需要精確地像素時，用px設定字體大小是一種好方法。一像素的大小是固定的。這是一個不取決於平台的、跨瀏覽器的准確設置字體大小高度為你所想的像素大小的方法。因為不同瀏覽器為得到同樣效果的算法可能不同，所以顯示效果可能有微小的不同。
字體大小的設置也可以使用組合值。例如，如果父元素設定為16px而子元素設定為larger, 子元素顯示的字體大小就會大於父元素。
注意: 用像素字體定義使得字體大小不可由用戶的瀏覽器改變。（例如，視力較低用戶可能希望使用比網頁設計師設定的字體大小大很多的字體）所以，如果你想創造能廣泛使用的設計請避免使用像素設定字體。
Em
另一種方法是用em值設定字體大小。em 值的大小是動態的。當定義或繼承font-size屬性時，1em等於該元素的字體大小。如果你在網頁中任何地方都沒有設置文字大小的話，那它將等於瀏覽器默認文字大小，通常是16px。所以通常1em = 16px。2em = 32px。 如果你設置了body元素的字體大小為20px，那1em = 20px、2em = 40px。那個2就是當前em大小的倍數。
可用這個公式計算像素大小的等價em大小：
em = 希望得到的像素大小 / 父元素字體像素大小
示例
/* 設定段落文字大小為非常大 */
p { font-size: xx-large }
/* 設定一級標題的文字大小為2.5倍大小 */
h1 { font-size: 250% }
/* 設定span里的文字大小為16px */
span { font-size: 16px; }
.small {
font-size: xx-small;
}
.larger {
font-size: larger;
}
.point {
font-size: 24pt;
}
.percent {
font-size: 200%;
}
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>
在頁面中展示的效果
可見鏈接（https://jsfiddle.net/api/mdn/）
