【原創】Firefox&Chrome默認字體的渲染差別

很久沒寫博客了，博客已死的感受。今天記錄一個簡單的問題，證實博客還活着。最近發現一個奇怪的問題：Firefox&Chrome在字體渲染的時候會存在一些差別，好比對 font-weight 的渲染。孤陋寡聞的我以前一直沒注意，爲了更清楚的說明問題，我作了如下測試。

首先，咱們對一個元素（好比：span）只設置字號（好比：16px），再輸入一段測試文案（如：我是一段測試文本。），而後分別在Firefox和Chrome瀏覽器中預覽效果，並經過下面的代碼查看標籤的寬高：

var sp = document.getElementById("J_Span");
var showSize = function(node){
    alert("Width: " + node.offsetWidth + "px\nHeight: " + node.offsetHeight + "px");
};
showSize(sp);

這時咱們會分別獲得下面這個結果：

// Chrome
Width: 144px
Height: 16px

// Firefox
Width: 144px
Height: 18px

這時咱們發如今高度上已經有差別了，由於行內元素沒法設置高度，因此我大膽的忽略了是設置高度致使的差別，那麼會不會是由於 line-height 致使高度差別呢？爲了獲得驗證我給 span 標籤添加了 line-height: 18px;，再次執行，發現運行結果並無改變。

至此，咱們還沒進入主題——對 font-weight 的測試。接下來咱們繼續給 span 標籤添加樣式：

.demo {
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
}

我能再次運行，分別獲得如下結果：

// Chrome
Width: 147px
Height: 16px

// Firefox
Width: 153px
Height: 18px

這下寬度上的差別就很明顯了。短短9個字的寬度就產生了這麼大的差別，若是是幾十個文本的一行，前端佈局形成的影響可想而知。難道是兩個瀏覽器對 bold 的解析存在差別，是否是改爲具體數值就行了？爲此我有調整了樣式，將 font-weight: bold; 改爲了 font-weight: 600;，然而結果卻仍是沒有獲得改變。

想了半天仍是找不到解決辦法，突然間靈光一閃，是否是全部字體都會有這種現象呢？因而我又繼續添加樣式，增長字體設置：

.demo {
	font-family: '微軟雅黑', sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
}

我再次在瀏覽器中運行，此次的運行結果卻有些出乎意料：

// Chrome
Width: 144px
Height: 21px

// Firefox
Width: 144px
Height: 22px

寬度上的差別消失了，而高度上的差別也有明顯改善。由此對比咱們能夠推斷：Firefox&Chrome對於默認字體的渲染存在一些差別，而對於其餘多數字體的渲染沒有顯著差別。爲了驗證這一推斷，我又更換了字體嘗試：

.demo {
	font-family: '幼圓', sans-serif;
    font-size: 16px;
    line-height: 18px;
    font-weight: 600;
}

我還依次改成 華文行楷、黑體 等進行驗證。果真測試結果都是OK的。

總結，當咱們對網頁字體進行設置的時候，若是使用的是系統默認字體（Windows下通常爲宋體），那麼對粗體的設置須要留心。

做者博客：百碼山莊