起因僅僅是下面的這句話：

font-size: 75%; /* Resets 1em to 11px */

這是我最喜歡的wordpress主題 Bito 的第一句CSS。我想那可能是作者的筆誤。因為印象里還是記得默認值是16px，那么75%就是12px了。不常寫CSS，但是喜歡挖點東西出來。一開也沒想到一個屬性值可以挖出這么多，最后導致這篇東西組織起來都有些麻煩: )

從標準看起

W3Cschools的font-size參考相當簡單，只是簡單的列舉了屬性的可取值。并且CSS2.1 Specification RC20090908里，關于font-size的定義也并不多。

大體上，font-size的值非常寬泛，即可以是關鍵詞定義的絕對值，可以是百分比或者 em 的相對值，還可以是絕對單位px。在實際工作中，我自己都似乎快習慣于用px定義字體大小，很少使用到那些關鍵字或者比例，但可能這不是個好習慣?；叵胱约簩W習CSS的過程里的例項，大部分都是用em或者百分比的。

關于px

對font-size直接應用px值，這樣做非常精確，而且也方便，所以我們習以為常。當對font-size賦予px值意味著瀏覽器將會把文本渲染成指定的像素那般高。并且通常情況是，西文字符在9px以下、中文字符在12px以下時，文字將難以辨認。使用像素單位的主要問題是兩個：

1. 當把文字設定為固定px值后，IE6以下瀏覽器將不能對其縮放。
2. 固定尺寸后失去級聯特性。

老外的眼里，第一點似乎是個大問題，因為他們把網站的可訪問性和易用性看的很重，無法看清字幾乎是不能容忍的。而第二點，只要不做彈性布局或者設置字體調節器之類的應用，并且針對的只是顯示器，也就不是大問題。這恐怕也是導致px這么泛濫的原因。好用，簡單，并且最重要的是——精確。

但是對于易用性來說，px似乎不是個好東西。
W3C Web 可訪問性指南：在標記語言的屬性值和樣式表屬性值里使用相對單位而不是絕對單位。[...]比如，在CSS里，使用 ‘em’ 或者 百分比長度 而不是使用絕對單位 ‘pt’ 或者 ‘cm’ 。

百分比的使用

百分比和em都是相對值，相對于父元素的字體大小。1em等于1個字體的大小，Chris Coyier認為em是基于大寫字母 M 的寬度(除此以外，我找不到更好的參考)。使用百分比和em可以很好使得各個元素間產生級聯的比例關系。

鑒于windows的瀏覽器，默認的字體大小是medium，即 16ppem (后面會講到)下顯示為16px。所以75%就是12px，而62.5%就是10px。

基于font-sizeのパーセント表記一覧里的百分比的零散表格，我重新組織了下面這張整表。下表僅僅作為參考，因為百分比的微弱遞減或遞增不會對文本產生可視化的效果(當然也有例外)，反而容易產生出混亂的級聯百分比關系。

之所以選擇了參考了這位日本開發者的資料是有原因的。比如，我們常常全局定義字體的相對medium(通常為16px)的62.5%，也就是10px，然后再對文檔的個個其他部分定義em值。相對于10px，1.2em就是12px，1.6em就是16px，依次類推。這樣的比例使用起來很直觀，并且會在所有的瀏覽器里表現完好，當然除了IE。

IE會錯誤的顯示字體大小(感覺上是字體框架有細微的變大)，并且僅限于中文。除非我們將比例設置成63%而不是62.5%。所以當我看到這張表中63%的時候，我覺得同是非西歐字符，這張表應該更具有參考價值。不過這些值我也沒能自己去全部測試，偷懶一下～

em似乎比百分數更加直觀，而且對于一個字體的寬度的把握往往也更容易。同時它們有相同的級聯性，使用的時候總是要避免規則的疊加。比如定義 div{font-size:1.2em;} ，那么在div里包含div就會出問題。1.2emx1.2em的疊加會使得文字比想象中的大——但這還不要緊，如果使用的是0.8em？縮小倍率的多次疊加很快會使得文字變得無法分辨。

無論是em還是百分比，都是相對值。并且常常相對于medium。但是關于medium這類關鍵字，就有了更多的話題。

關鍵字

我對于font-size的理解一直停留在上面說的那些，直到半個月前，我讀到這篇Toward a standard font size interval system。

回到之前的CSS2.1 Specification RC20090908，標準把關鍵字定義為這樣：

回顧略顯古老的HTML 3.2 Reference Specification – Font，這七個關鍵字是否是對應于已經實現的HTML font標記不得而知，但是上面的對應關系并不是一一對應的，medium對應的是size 3。Html Font Size Tutorial CSS Style上可以清楚的看到全部的關鍵字效果。

下面這張圖，更加直觀些。但是注意第二行。同樣對于English Font加上larger，IE8和FF渲染為18px，Opera、Chrome和Safari則渲染為19px。

下面的表截取自Toward a standard font size interval system里的Synoptic table，對應于windows常用的96dpi的情況。是的，96dpi，我們幾乎從來不去改變這個默認的值，除非也許某個人因為高分屏字太小的折磨，而主動調大到了120dpi。

牽扯到一個很重要的概念，ppem。它指的是Pixels per em，即每個字體大小的像素數，定義了字符在屏幕上的易讀性。關于更多的信息，我強烈建議閱讀Toward a standard font size interval system原文。

當把xp的dpi從96調整到120， 整個系統的尺寸，包括圖形和文字都被放大了。此時，如果打開IE，font-size:medium 不再是16px，而是20px。雖然我也試過Chrome和FireFox，但它們沒有變化。我不明白原因，如果有人知道，麻煩請告訴我聲: ）

這再次的提醒了我們，CSS不是只為顯示器而設計的，而且也不是專為windows而設計的。我們有時可能需要考慮更多更多。
水平有限，文中如有錯誤望指正~