請看下面的例子：（live demo here）爲什麼字體在平臺上看起來不同？
HTML：
<label>Name</label>
CSS：
label {
font-family: serif;
font-size: 16px;
}
JS：
$(function() {
console.log($("label").width());
});
當我運行Windows 7的這個例子與火狐，結果是38。但是，當我在Ubuntu上使用Firefox（使用VirtualBox）運行相同的示例時，結果爲48。在這兩種情況下，Firefox版本都是7.0.1。
這是什麼區別？我怎麼能使這是相同的？
您沒有指定實際的字體; 「serif」只是任何帶襯線的字體的元名稱，並且瀏覽器在不同的平臺和瀏覽器上會有不同的默認值。
但是，即使您指定了任何平臺上可能存在的字體（如core fonts for the web中的字體），由於字體渲染不同，結果仍可能不一樣;窗口字體渲染確實有很強的字體提示（儘可能地強制字母形式進入像素網格），而Mac OS和Gnome等則使用了不太積極的暗示。即使使用相同的字體和大小，此效果可能會導致文本的寬度隨幾個像素而變化。
爲了避免使用固定佈局時的佈局問題，您應該始終將至少10-20像素（對於相當短的文本）至少設置爲寬度以避免包裝或溢出。
字體渲染和大小對平臺非常具體。您可能想嘗試一種您知道在所有系統上都可用的字體，而不是使用像「serif」這樣的通用字體。 Arial也許？看看你的號碼是否匹配。
此外，您可能會看到瀏覽器之間的一些差異，因爲像素字體大小也可能會有所不同。您可能希望查看CSS重置以幫助緩解該問題。
也有，在某些瀏覽器，用戶定義的字體大小。因此，您可能需要檢查每個瀏覽器以確保字體大小的設置相同。 （這就是爲什麼我喜歡使用ems，而不是字體大小的px。）
將'serif'更改爲'Arial'解決了這個問題。 –