濮阳杆衣贸易有限公司

主頁 > 知識庫 > 95%的中國網(wǎng)站需要重寫CSS

95%的中國網(wǎng)站需要重寫CSS

熱門標簽:移動400辦理電話 武漢人工外呼系統(tǒng) 中國地圖標注各省份 蘇州通信外呼系統(tǒng)多少錢 沈陽智能外呼系統(tǒng)排名 上古卷軸5地圖標注mod 山西旅游景地圖標注 荒野大鏢客2地圖標注怎么變中文 北川縣地圖標注

很長一段時間,我都使用12px作為網(wǎng)站的主要字體大小。10px太小,眼睛很容易疲勞,14px雖容易看清,卻破壞頁面的美感。唯獨12px在審美和視力方面都恰到好處。

誰對我的網(wǎng)站字體大小有意見?
我老爸,他是第一個向我反映看不清我的網(wǎng)站文字的人。這使我意識到12px,其實只是讓我覺得很不錯而已,而對于那些視力下降明顯的中年以上的人來講,幾乎等于10px對于我的感覺。
于是我告訴他,在“查看”里調(diào)整“文字大小”就可以了。但是卻發(fā)現(xiàn)這是徒勞的。在Firefox能輕易調(diào)整的字體大小,怎么在IE就變得如此”堅不可調(diào)“?

問題出在哪?
我又試著打開中國的三大門戶—新浪,網(wǎng)易,搜狐。它們的字體無一例外的在IE里失去可調(diào)性??磥磉@不是我網(wǎng)站獨有的毛病。再看看MSN,Google,A list apart,華盛頓郵報,在IE里卻是可調(diào)的。難道IE在字體調(diào)整上也搞歧視不成?
困擾我的問題直到看到這篇大作:How to size text using ems,才得到徹底的解決。
關(guān)鍵點
1. IE無法調(diào)整那些使用px作為單位的字體大?。?BR>2. 國外的大部分網(wǎng)站能夠調(diào)整的原因在于其使用了em作為字體單位;
3. Firefox能夠調(diào)整px和em,但是96%以上的中國網(wǎng)民使用IE瀏覽器(或內(nèi)核)。這意味這中國網(wǎng)站的字體大小可以被認為不可調(diào)。

95%的中國網(wǎng)站需要重寫CSS
在我所觀察的中國網(wǎng)站中,包括三大門戶,以及“引領(lǐng)”中國網(wǎng)站設(shè)計潮流的藍色理想,ChinaUI等都是使用了px作為字體單位。只有百度好歹做了個可調(diào)的表率。
而在大洋彼岸,幾乎所有的主流站點都使用em作為字體單位,也就是可調(diào)的。
沒錯,px比em更加容易使用,我也敢打賭大部分讀者不知道em為何物或者它相當于多少px。
國外人士如此重視網(wǎng)站易用性(Accessibility),不僅因為其根生蒂固的人文精神,直接原因可能是因為有一部法律來約束他們—例如美國的Section 508,強制網(wǎng)站達到一定的易用性。所以沒有哪個主流站點愿意被那些視力下降或是殘缺的人告上法庭。
: 在中國, 可能把微軟告上法庭來的更簡單點,為什么IE對于px那么死板。

如何重寫你的網(wǎng)站CSS
Jorux.com作為一個對視力下降人士負責任的站點,已經(jīng)重寫了CSS的Font-size部分。在這里,Jorux和各個有人文精神的網(wǎng)站主討論如何用em重寫Font-szie的問題。

em vs. px

em是何物?
em指字體高,任意瀏覽器的默認字體高都是16px。所以未經(jīng)調(diào)整的瀏覽器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。為了簡化font-size的換算,需要在css中的body選擇器中聲明Font-size=62.5%,這就使em值變?yōu)?6px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數(shù)值除以10,然后換上em作為單位就行了。em有如下特點:
1. em的值并不是固定的;
2. em會繼承父級元素的字體大小。

重寫步驟:
1. body選擇器中聲明Font-size=62.5%;
2. 將你的原來的px數(shù)值除以10,然后換上em作為單位;
簡單吧,如果只需要以上兩步就能解決問題的話,可能就沒人用px了。經(jīng)過以上兩步,你會發(fā)現(xiàn)你的網(wǎng)站字體大得出乎想象。因為em的值不固定,又會繼承父級元素的大小,你可能會在content這個div里把字體大小設(shè)為1.2em, 也就是12px。然后你又把選擇器p的字體大小也設(shè)為1.2em,但如果p屬于content的子級的話,p的字體大小就不是12px,而是1.2em=1.2 * 12px=14.4px。這是因為content的字體大小被設(shè)為1.2em,這個em值繼承其父級元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作為其子級,em則繼承content的字體高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新計算那些被放大的字體的em數(shù)值。避免字體大小的重復聲明,也就是避免以上提到的1.2 * 1.2= 1.44的現(xiàn)象。比如說你在#content中聲明了字體大小為1.2em,那么在聲明p的字體大小時就只能是1em,而不是1.2em, 因為此em非彼em,它因繼承#content的字體高而變?yōu)榱?em=12px。

詭異的12px漢字(原因待查)
本人在完成em轉(zhuǎn)換時還發(fā)現(xiàn)了一個詭異的現(xiàn)象,就是由以上方法得到的12px(1.2em)大小的漢字在IE中并不等于直接用12px定義的字體大小,而是稍大一點。這個問題我已經(jīng)解決,你只需在body選擇器中把62.5%換成63%就能正常顯示了。原因可能是IE處理漢字時,對于浮點的取值精確度有限。閱讀本篇的讀者還有其他解釋嗎?
本現(xiàn)象只發(fā)生在12px的漢字,英文不存在此現(xiàn)象。你可以在這里下載到此表現(xiàn)此現(xiàn)象的文件。下載后請讀者用IE打開sample.htm, 可以看到第一段文字明顯長于第二段。然后你可以用編輯器打開style.css,看看究竟發(fā)生了什么。解決方法就是把style.css中的62.5%換為63%。演示鏈接

還可以做哪些改進

為什么還需改進:
1. 你的網(wǎng)站css過于復雜,以至于不知道元素的從屬關(guān)系,很難重寫css;
2. 絕大部分人看了本文之后仍然不會重寫css;
3. 很大部分人不知道瀏覽器可以調(diào)整頁面的字體大小。

所以你需要一個諸如本站信息框中的字體大小調(diào)整控件。
相信本站讀者的英語能力,這里就不再羅嗦了,請參看:The Text Changer

Important reference:
1. How to size text using ems
2. The Text Changer

備注:
1. 自網(wǎng)站Reboot以來,老爸又反映我整天在”屬性一”"屬性二”的,看不大明白,已經(jīng)拒絕訪問Jorux.com了;
2. 讀者對如何用em重寫css,或是對字體大小調(diào)整控件有任何疑問,請留言;
3. 本站在加強易用性上做了如下改進:a. 用em重寫了css; b. 去除了#和文本廣告代碼,提高了網(wǎng)頁加載速度; c. 增加了字體大小調(diào)整控件;
4. 重新整理”O(jiān)ther Blogger”鏈接,請發(fā)現(xiàn)被摘掉鏈接的網(wǎng)站自行摘除鏈向本站的鏈接,本站停止交換友情鏈接。尚保留的網(wǎng)站有如下特點:a. 非日記式博客;b. 內(nèi)容優(yōu)秀;c. 原創(chuàng)為主;
5. 本站常規(guī)在周一發(fā)表post,間隔為一到兩周,感謝讀者對本站的關(guān)注, 以后除星期一以外,您都不需更新本站Feed了。

標簽:海東 喀什 陽泉 遼源 邯鄲 南充 東莞 濱州

巨人網(wǎng)絡(luò)通訊聲明:本文標題《95%的中國網(wǎng)站需要重寫CSS》,本文關(guān)鍵詞  95%,的,中國,網(wǎng)站,需要,重寫,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《95%的中國網(wǎng)站需要重寫CSS》相關(guān)的同類信息!
  • 本頁收集關(guān)于95%的中國網(wǎng)站需要重寫CSS的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    安陆市| 青神县| 土默特右旗| 荔波县| 万州区| 松桃| 乌恰县| 清涧县| 濉溪县| 昌黎县| 兴宁市| 嘉兴市| 定兴县| 瑞金市| 龙州县| 化隆| 岳阳市| 南华县| 白沙| 嘉峪关市| 荆门市| 德格县| 昭平县| 万源市| 随州市| 深圳市| 四川省| 连平县| 绿春县| 南溪县| 海丰县| 武安市| 赫章县| 福安市| 平湖市| 陇南市| 湖口县| 米泉市| 霍山县| 新干县| 广东省|