font-size 你所不知道的值

提及 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/）