font: .81em/150% Arial, Helvetica, sans-serif; 其中 .81em起什麼作用?

12-31

看到過很多人這樣設置字體，比較困惑，無論是瀏覽器默認字體尺寸，還是用戶的字體尺寸首選項，乘以0.81後都不會是整數，請問這樣設置字體尺寸意義何在？字體尺寸不是整數，瀏覽器是如何解析的？

對於 IE6 等較老的瀏覽器，px 之類的絕對單位會阻礙用戶調節字型大小，而 em 之類的相對單位無此問題。雖然現在的 modern 瀏覽器都沒有這個技術限制了（而且大多數瀏覽器的縮放模式都轉向了整頁等比縮放，而不是只縮放文本），但這個習慣還是流傳了下來。

因為 1em = 父對象字型大小，所以用 em 可以明確體現父子對象的字型大小關係（比如你可能會把 & 的字型大小設置為 0.9em），而且便於統一調整字型大小，頁面設計思路更加彈性。這也是一個優點。

至於這個 0.81em，如 @柏盼所說，這個應該是為了相對主流的瀏覽器默認字型大小（16px）而算出 13px 來（13/16 = 0.8125，或許這個開發者喜歡截取到小數點後兩位吧）。目前的瀏覽器遇到不整的 px 數值時通常是四捨五入取整的（詳見 @麥時的答案），但 Firefox 會直接使用帶小數的 px 字型大小。

「看到過很多人這樣設置字體」？或許是抄來抄去的結果吧。

老外的一些 CSS Reset 或 UI 框架可能會這樣做，但國內網站應該很少這樣——當然有些網站會在不知其所以然的情況下照抄。

絕大多數瀏覽器的默認樣式中，根元素的 font-size 是 16px。16px × 0.81 = 12.96px，瀏覽器通常會對它舍入，即 13px。

這條聲明通常是寫給 body 元素的，這樣頁面中的所有元素的 font-size 都會繼承這個值。對西文來說，13px 的正文是一個比較適中的選擇。但對中文來說，在 Windows 下 13px 反而是最尷尬的，因為宋體點陣 12px 和 14px 的顯示效果要明顯好於 13px。

那為什麼不直接寫成 13px 呢？原因正如 @梁海所說，是為了保留瀏覽器的「文本縮放」功能。（文本縮放的實質就是瀏覽器調整其默認樣式，令根元素的 font-size 值增大或減少。如果將 body 元素的 font-size 直接寫為 px 單位，則文本縮放功能會失效。）

順便說一句，有時，甚至將布局元素的長度值也換算為 em 單位（比如 `div.wrapper {width: 50em;}` ），這樣瀏覽器的文本縮放不僅可以控制文本的字體大小，同時也可以控制整頁布局比例了。這種做法被稱為「em 布局」或「彈性布局」，曾在國外十分流行。但較新的瀏覽器都已經標配「整頁縮放」功能，em 布局已經不是那麼必要了。

算了下，16px × 0.81 接近 13px，應該是設置 13 px 的，13px 也是一個常用字體大小，用 em 比 px 是支持 IE6 下面的字體可調性。

首先瀏覽器默認字體的大小為16px，可顯示的最小值是1px，不存在可顯示0.2或0.5這樣的像素。
不過我們在css中可以這樣寫，例如width:100.5px。
通常情況下，IE6IE7會忽略數值中的小數部分，只取整數部分，以上為例記為：100px，其他瀏覽器會對小數四捨五入，記101px。
不過問題中這個例子有些特殊，使用的是em這個相對單位，16px*0.81=12.96px，IE6IE7「反常」的特殊的做四捨五入處理，記13px，其他瀏覽器也相同。
不建議這樣寫：font: .81em/150% Arial, Helvetica, sans-serif; 英文網站或許還可以，但也覺得不妥，中文網站的話顯然是有問題的。

孤朽寡聞，從零零年起開始接觸CSS和網頁設計，沒聽過0.81em的設定，em的單位在螢幕上沒有意義，而那0.01em對那微小的字體並沒有大幫助，0.81em也不是常用螢幕字形的最佳渲染數值。

剛剛在google搜尋，有設計師談到0.81em的問題：

Changing the font size to at least 0.9em will alleviate most of the problem, especially in Firefox. Safari will also display much better text at that size. Although 0.9em is a real improvement I would vote for increasing the size all the way back to 1em where both Safari and Firefox display much, much crisper text than they do at 0.9em.

Upper-case "I" is only seven pixels high, lower-case "v" is only five pixels high in Safari. Now, compare this to Firefox on the right that is actually worse because the even number of pixels used to represent the 0.81em the style dictates as height (six pixels for "v" and eight for "I") results in garbled text and loss of contrast. See especially the letters "i", "e", "a" and "v" for best comparison where this font size does not work.

http://drupal.org/node/882316

看來0.81em設定在先進瀏覽器上並沒有幫助，反幫倒忙。

.81是0.81的簡寫，當前指的是該字體的大小是父級字體大小的0.81倍。這個定義同時定義了字型大小/行高字體