css font 英數 中文 不對齊 處理

.

IE css font-family 數字 中文 不對齊 按鈕 偏上 置中 原因 問題 處理 決解

這只有在IE瀏覽器才會有的鳥問題...,比較新的版本IE似乎已經沒這問題。

一般寫完網頁除了IE外,還要試一下firefox及Chrome瀏覽器看看結果,

IE也要用舊版的run看看,畢竟XP內建的 IE6 還是有人用,

網頁能在各種瀏覽器下相容性高些會比較好。

 
見下圖代碼(避免代碼被瀏覽器解析用成圖片):

(點圖放大)
cssfontfy01

結果:

cssfontfy02

.

這問題以前我也是胡亂找不太清文章試,反正ok了就好,實際上原因並不知,

現在想想應該是字體包的問題,可能是那時舊IE並沒有好好整合中文就推出。

上圖中 font-family 設置 Verdana,Geneva,sans-serif

意思是先匹配Verdana在匹配Geneva後匹配sans-serif,

都找不到就用瀏覽器預設字體包,上述3種字體是不含中文字,只有英數西歐那些,

仔細看看高度大約差了2px左右,也就是起始準位和中文字差了2px左右 ...。

知道原因後,就很好處理,只要改用微軟正黑雅黑,細明體...那些就行了,

這些字體包都是有整合中文英數那些里里扣扣,如下圖:

(點圖放大)
cssfontfy03

結果:

cssfontfy04

.

當然內文部份想多點變化,英數想羅馬字型那些...,那就用個div框住該區域,

然後給這個 div 對應的 id 或 class 重新定義個 font-family 值就可,

一般內文標題那些地方看不太出來還算是ok,大部份都是按鈕之類樣式,才會有這種烏問題。

.

按鈕測試,如圖:

(點圖放大)
cssfontfy05


結果:

cssfontfy06


.

input 中 button及submit 按鈕,偏上情形就嚴重,這裡可以使用字形大小來處理,

10~16px ...等,起始準位又不盡相同,簡單測試了一下,size 16px及內距top設1px,

firfox chrome IE 看起來差不太多,勉強可接受,如下圖:

(點圖放大)
cssfontfy07

結果:

cssfontfy08

cssfontfy09

cssfontfy10

.

難怪有的站,提交按鈕的字體size都滿大的,當然如果覺得這問題處理有點麻煩,

也可以將按鈕改換成圖片方式,一勞永益,不用去care字體上下置中問題。

.

實際上按鈕要用到很好有特效那些...,代碼都好幾10行... 落落長,

看了就累,上述只是大略解說 font 英數 中文 不對齊 原因及簡易處理,

大致上就這樣,大家參考看看。

.

留言

秘密留言

No title

Simply wish to say your article is as astonishing. The clearness in your put up is
simply spectacular and i could suppose you're an expert in this subject.
Well along with your permission allow me to take hold of your feed to stay
updated with forthcoming post. Thank you a million and please continue the gratifying
work.