DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver相關 >> 網頁設計中空格的寬度 (1)
網頁設計中空格的寬度 (1)
編輯:Dreamweaver相關     
  首先對空格寬度的定義:空格,由於每個浏覽器處理會有微小的不同,在這裡我將可以選中的寬度作為空格的寬度。視覺寬度和可選中的寬度有 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 下實際顯示的字號有所不同,經測試如下圖:

11px and 13px

  • 在宋體下,支持 11px,其余幾種測試字體都是當成 12px 處理;
  • IE 6 會把 Tahoma 的 13px 漢字渲染成 14px;IE 7 正常;其余幾種測試字體都按照 13px 正常處理;
  • 默認字體、宋體、Arial、Verdana 在 IE 6 和 IE 7 上的字號表現一致。

下面我們開始看空格,以下是測試過程中的一些數據,也可跳過直接看文末的小結部分和這個表格:空格的寬度。在閱讀之前請確保已經看過上文的情況說明

默認都是 16px 的漢字:

中-中 英-英 英-中 中-英 Firefox 2.0 8 8 8 8 IE6 8 4 4 8 IE7 8 4 4 8注:IE 6、7 下如果調了文字大小,最大時空格為11px,較大時空格為10px

當 font-size: 12px; 時:

中-中 英-英 英-中 中-英 Firefox 2.0 6 6 6 6 IE6 6 3 3 6 IE7 6 3 3 6

在 font-size: 12px; 基礎上增加 font-family: simsun; 時(用simsun或者宋體沒有區別):

中-中 英-英 英-中 中-英 Firefox 2.0 6 6 6 6 IE6 6 6 6 6 IE7 6 6 6 6

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

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

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

中-中 英-英 英-中 中-英 Firefox 2.0 6 6 6 6 IE6 6 3 3 6 IE7 6 3 3 6

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

中-中 英-英 英-中 中-英 Firefox 2.0 7 7 7 7 IE6 7 3 3 7 IE7 7 3 3 7

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

中-中 英-英 英-中 中-英 Firefox 2.0 7 7 7 7 IE6 7 4 4 7 IE7 7 4 4 7

font-size: 11px;宋體:

中-中 英-英 英-中 中-英 Firefox 2.0 6 6 6 6 IE6 6 6 6 6 IE7 6 6 6 6

font-size: 13px;宋體:

中-中 英-英 英-中 中-英 Firefox 2.0 7 7 7 7 IE6 7 7 7 7 IE7 7 7 7 7

font-size: 14px;宋體:

中-中 英-英 英-中 中-英 Firefox 2.0 7 7 7 7 IE6 7 7 7 7 IE7 7 7 7 7

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

小結

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

後記

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved