在 font-size: 12px; 基礎(chǔ)上增加 font-family: simsun; 時(shí)(用simsun或者宋體沒有區(qū)別):
|
中-中 |
英-英 |
英-中 |
中-英 |
Firefox 2.0 |
6 |
6 |
6 |
6 |
IE6 |
6 |
6 |
6 |
6 |
IE7 |
6 |
6 |
6 |
6 |
我們可以發(fā)現(xiàn)如果不設(shè)置字體的話,IE使用英文字體渲染內(nèi)容。也可以認(rèn)為在中文網(wǎng)頁上使用宋體是相對(duì)安全的。
在上面我們可以看到空格的大小都是 12px 的 1/2,如果是 11px 或者 13px 呢?三個(gè)瀏覽器怎么處理小數(shù)呢?繼續(xù)測試。
font-size: 11px;默認(rèn)字體:
|
中-中 |
英-英 |
英-中 |
中-英 |
Firefox 2.0 |
6 |
6 |
6 |
6 |
IE6 |
6 |
3 |
3 |
6 |
IE7 |
6 |
3 |
3 |
6 |
font-size: 13px;默認(rèn)字體:
|
中-中 |
英-英 |
英-中 |
中-英 |
Firefox 2.0 |
7 |
7 |
7 |
7 |
IE6 |
7 |
3 |
3 |
7 |
IE7 |
7 |
3 |
3 |
7 |
font-size: 14px;默認(rèn)字體:
|
中-中 |
英-英 |
英-中 |
中-英 |
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 |
上面看到的數(shù)據(jù)都是默認(rèn)字體和宋體,一般網(wǎng)頁設(shè)計(jì)的時(shí)候不會(huì)使用默認(rèn)字體(即不設(shè)置字體),而且為了讓英文更好看,我們通常選用 Tahoma、Verdana、Arial 這三種字體。我對(duì)這三種字體分別做了測試,同時(shí)加上剛才的數(shù)據(jù),整理成一個(gè)表格:空格的寬度。
小結(jié)
- 只使用宋體是相對(duì)安全的,在這三款瀏覽器里面如此;
- 除了 Tahoma,其他幾種測試情況下,IE 6 和 IE 7 的表現(xiàn)一致(但除了宋體和 FF 一樣外,其余都有差別);
- 在 Firefox 下,同等樣式的所有空格(中-中、英-英、中-英、英-中)寬度一致;
- 在 IE 下,中文字和中文字之間的空格,等于中文字和英文字之間的空格寬度(注意我說的順序),大于等于英文字和中文字之間的空格(等于的情況出現(xiàn)在設(shè)置了中文字體,大于的情況一般是兩倍);
- 如果空格前面是中文,那么空格按照中文處理;如果空格前面是英文,那么空格按照英文處理;
- 如果已經(jīng)用了某種英文字體怎么辦呢?想辦法分別對(duì)待空格和內(nèi)容吧。比如正好是鏈接與鏈接間的空格,那么可以給鏈接設(shè)置字號(hào),給空格設(shè)置不同字號(hào)(還可以分瀏覽器 hack)。
后記
因?yàn)闇y試比較瑣碎繁雜,可能會(huì)有錯(cuò)誤,歡迎在實(shí)踐過程中發(fā)現(xiàn)問題者的指正。也歡迎多一些字體的測試。
本文鏈接:http://m.95time.cn/tech/web/2007/4878.asp
出處:JunChen
責(zé)任編輯:moby
上一頁 空格的寬度 [1] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|