空格的寬度

作者:Admin 日期:2008-02-01

字體大小: 小中大

首先對空格寬度的定義：空格，由於每個瀏覽器處理會有微小的不同，在這裡我將可以選中的寬度作為空格的寬度。視覺寬度和可選中的寬度有 0~3px 的差異（由於 kerning table 的不同），但以下測試的三種瀏覽器中相同。又因在 ClearType（次像素平滑）情況下視覺寬度有所不同（據猜測可選中的寬度應該和不開 ClearType 一致），簡單起見，本文僅研究不開 ClearType 的情況。

測試環境：Firefox 2.0.0.6 / IE 6.0.2900 / IE 7 on WinXP, XHTML transitional （經測試與DTD無關），以下表格中的數字如無單位，均表示像素（px）。

測試方法：利用 CSS 定義字體和字號，選中空格（中-中、英-英、中-英、英-中四種情況），截圖並計算寬度。

另外以下提到的 font-size: 11px; 都是指定義的字號，在 Firefox 下忠實顯示，在 IE 下實際顯示的字號有所不同，經測試如下圖：

FF下的11px和13px漢字

IE6下的11px和13px漢字

IE7下的11px和13px漢字

在細明體下，支持 11px，其餘幾種測試字體都是當成 12px 處理；
IE 6 會把 Tahoma 的 13px 漢字渲染成 14px；IE 7 正常；其餘幾種測試字體都按照 13px 正常處理；
默認字體、細明體、Arial、Verdana 在 IE 6 和 IE 7 上的字號表現一致。
下面我們開始看空格，以下是測試過程中的一些數據，也可跳過直接看文末的小結部分和這個表格：空格的寬度。在閱讀之前請確保已經看過上文的情況說明

默認都是 16px 的漢字：

註：IE 6、7 下如果調了文字大小，最大時空格為11px，較大時空格為10px

當 font-size: 12px; 時：

在 font-size: 12px; 基礎上增加 font-family: mingliu; 時（用mingliu或者細明體沒有區別）：

我們可以發現如果不設置字體的話，IE使用英文字體渲染內容。也可以認為在中文網頁上使用細明體是相對安全的。

在上面我們可以看到空格的大小都是 12px 的 1/2，如果是 11px 或者 13px 呢？三個瀏覽器怎麼處理小數呢？繼續測試。

font-size: 11px;默認字體：

font-size: 13px;默認字體：

font-size: 14px;默認字體：

font-size: 11px;細明體：

font-size: 13px;細明體：

font-size: 14px;細明體：

上面看到的數據都是默認字體和細明體，一般網頁設計的時候不會使用默認字體（即不設置字體），而且為了讓英文更好看，我們通常選用 Tahoma、Verdana、Arial 這三種字體。我對這三種字體分別做了測試，同時加上剛才的數據，整理成一個表格：空格的寬度。

小結

只使用細明體是相對安全的，在這三款瀏覽器裡面如此；
除了 Tahoma，其他幾種測試情況下，IE 6 和 IE 7 的表現一致（但除了細明體和 FF 一樣外，其餘都有差別）；
在 Firefox 下，同等樣式的所有空格（中-中、英-英、中-英、英-中）寬度一致；
在 IE 下，中文字和中文字之間的空格，等於中文字和英文字之間的空格寬度（注意我說的順序），大於等於英文字和中文字之間的空格（等於的情況出現在設置了中文字體，大於的情況一般是兩倍）；
如果空格前面是中文，那麼空格按照中文處理；如果空格前面是英文，那麼空格按照英文處理；
如果已經用了某種英文字體怎麼辦呢？想辦法分別對待空格和內容吧。比如正好是鏈接與鏈接間的空格，那麼可以給鏈接設置字號，給空格設置不同字號（還可以分瀏覽器 hack）。

後記

因為測試比較瑣碎繁雜，可能會有錯誤，歡迎在實踐過程中發現問題者的指正。也歡迎多一些字體的測試。

[本日誌由 Admin 於 2008-02-01 00:04 AM 編輯]