你在 CSS 中有沒有定義中文字體?如果定義了,你用的是哪些中文字體?你為這個問題糾結過嗎?
我們糾結過,而且是相當糾結。
先看看我們現在所用的 CSS:
body { font-family: Verdana,Arial,Helvetica,sans-serif; }
是的,根本沒有定義中文字體,直接使用瀏覽器的默認字體。如果你沒有修改過,在 Windows 7 中 Chrome 與 Firefox 安裝后的默認字體都是“微軟雅黑”;唯獨 IE 不是,根據目前觀察的情況,IE 的默認字體用的是 SimSun-ExtB(宋體)。
我們這樣的 CSS 定義雖然會造成 IE 瀏覽器與非 IE 瀏覽器顯示的字體不一致(IE 用戶可以通過修改瀏覽器的默認字體解決這個問題),但這是一個情非得以的選擇。
你也許會問為什么不直接在 CSS 中把字體定義為“微軟雅黑”,“宋體”?這樣在 Windows 系統上 IE 瀏覽器與非 IE 瀏覽器都統一用“微軟雅黑”顯示;非 Windows 系統(沒有“微軟雅黑”字體),就統一用“宋體”顯示。
我們這么想過,也這么做過。但是現實很殘酷。
雖然都是姓“微軟“,名叫“雅黑”,但是在不同版本 Windows 上的顯示效果卻不一樣。比如,Windows XP 與 Windows 7,一個很丑,一個很漂亮。顯示效果不一樣,卻又用同一名字。於是,糾結就來了。
如果在 CSS 中定義第一個中文字體為“微軟雅黑”,Windows XP 的用戶很有意見(“微軟雅黑”在 XP 中的確很丑);如果定義為“宋體”,Windows 7 的用戶又不答應(“微軟雅黑” 在 Win 7 中的確比“宋體”好看)。
如果 Windows 7 與 Windows XP 中的“微軟雅黑”使用不同的名字,就不會有這個糾結的問題。比如 Windows 7 中叫“微軟雅黑2”,CSS 可以這樣寫:
body { font-family: Verdana,Arial,Helvetica,微軟雅黑2,宋體,sans-serif; }
這樣的話,Windows 7 中的瀏覽器會用“微軟雅黑2”字體進行顯示。Windows XP 中由於沒有這個名字的字體,就用“宋體”顯示,多好。
面對這樣的糾結問題,目前折衷的辦法就是本文開頭的 CSS 定義,不定義中文字體,使用瀏覽器的默認字體。這樣至少 Chrome 與 Firefox 沒問題,高級一點的 IE 用戶也沒有問題。對於其他的 IE 用戶,與其讓他們去改 IE 的默認字體,還不如讓他們換瀏覽器。
你也許會說,我一點不糾結,我覺得在 Windows 7 中用 IE 的默認字體(宋體)挺好。微軟才不會讓你這么舒服呢。
根據園友 Learning hard 的反饋,我們發現,如果 CSS 中沒定義中文字體,而且 IE 用的是默認宋體,那么在文本框中輸入文字時,如果通過鍵盤上的箭頭向后移動光標,光標會突然消失。。。雖然不糾結,但你會很郁悶。
希望這個糾結只是因為 Web 前端知識的缺乏,如果你有更好的解決方法,期待你的分享!