通常用戶看到的頁面的樣式(css)會(huì)受到三層控制:

第一層是瀏覽器的默認(rèn)樣式;

第二層是網(wǎng)頁定義樣式;

第三層是用戶自定義樣式.

和CSS一樣，后面的優(yōu)先級(jí)高于前面的，也就是說網(wǎng)頁定義樣式可以覆蓋瀏覽器的默認(rèn)樣式， 而用戶自定義樣式優(yōu)先級(jí)最高。

實(shí)際情況是雖然瀏覽器都或多或少提供了用戶自定義樣式的功能， 但是極少數(shù)會(huì)有用戶去自定義，一般用也是高級(jí)用戶。

而瀏覽器默認(rèn)的樣式往往在不同的瀏覽器、不同的語言版本甚至不同的系統(tǒng)版本都有不同的設(shè)置， 這就導(dǎo)致如果直接利用默認(rèn)樣式的頁面在各個(gè)瀏覽器下顯示非常不一致， 于是就有了類似?YUI的reset?之類用來盡量重寫瀏覽器的默認(rèn)設(shè)置保證各個(gè)瀏覽器樣式一致性的做法。

拿字體來說，各個(gè)瀏覽器默認(rèn)的字體種類、字體大小和字體行高都不一樣， 比如IE8的中文版在Windows XP下顯示網(wǎng)頁時(shí)默認(rèn)字體是宋體，而英文版肯定不會(huì)如此。 所以我們需要統(tǒng)一設(shè)置默認(rèn)的字體樣式，以便實(shí)現(xiàn)一致的顯示效果來保證設(shè)計(jì)的一致性和提高開發(fā)效率。

以后準(zhǔn)備使用如下默認(rèn)字體樣式：

body{font: 12px/1.5 arial; }

字體：arial

我們頁面的絕大部分內(nèi)容字符都是中文， 毫無疑問目前為止在網(wǎng)頁上最常用也是最通用的顯示中文的字體是宋體， 但是宋體在顯示英文、數(shù)字和英文符號(hào)時(shí)過于糟糕，比如?字符， 所以我們一般期望通過CSS來實(shí)現(xiàn)用更好的字體樣式來顯示它們，然后用宋體來顯示中文和中文符號(hào)。

之所以選擇arial是因?yàn)?#xff1a;

• Windows和Mac都預(yù)裝了這款字體，應(yīng)該是使用最廣泛的網(wǎng)頁字體了。 它的潛在對手tahoma和helvetica就沒有這么幸運(yùn)了。

• 視覺設(shè)計(jì)的專業(yè)人士可能會(huì)認(rèn)為在Windows中使用tahoma、在Mac中使用helvetica更好， 比如淘寶的默認(rèn)字體樣式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;?這是一個(gè)很不錯(cuò)的選擇，但是你也會(huì)發(fā)現(xiàn)Google、YAHOO、Youtube、Bing甚至MSN的新版都 使用arial作為第一默認(rèn)字體。 所以從美觀和可讀性上來講arial應(yīng)該是完全可以接受的。

• 一般情況下設(shè)置font-family都會(huì)在最后設(shè)置通用字體族以保證其安全性， 比如Google的設(shè)置為?font-family:arial,sans-serif;?但是至少在非中文版的Win7下當(dāng)編碼是GBK時(shí)，IE8會(huì)因sans-serif來渲染宋體， 導(dǎo)致字體出現(xiàn)變形，這就是為什么淘寶需要在sans-serif前加上宋體而Google無需這樣做的原因。

• 因?yàn)橹形淖煮w的選擇非常有限，所以目前所有的主流瀏覽器都設(shè)置使用宋體來顯示中文。 Baidu的首頁和搜索結(jié)果頁使用font-family:arial;可以從側(cè)面說明這樣做的安全性。 可能有人注意到Firefox中國版默認(rèn)顯示的中文字體是微軟雅黑， 這是因?yàn)橹\智網(wǎng)絡(luò)擅自修改了用戶自定義樣式，不允許網(wǎng)頁的樣式覆蓋瀏覽器設(shè)置的樣式。 也是由于類似的情況，我們要彈性設(shè)計(jì)網(wǎng)頁非常重要。

通過設(shè)置行高和hasLayout能解決絕大部分情況，但是都不會(huì)很完美， 如果把字體改成“宋體”能徹底的解決問題。</p>

很明顯，這個(gè)問題只出現(xiàn)在IE上。 所以，如果你的網(wǎng)站很少使用英文、數(shù)字和英文符號(hào)， 那么直接設(shè)置{font-family:\5b8b\4f53;}?也是很合理的選擇。

大小：12px

12px是宋體能顯示的極限，雖然微軟雅黑能顯示更小的字體，但目前的應(yīng)用環(huán)境尚未成熟。 由于宋體基本上是目前顯示中文唯一的通用Web字體，所以12px成為最常用的字體大小。 我們當(dāng)然可以依據(jù)產(chǎn)品的需要來修改這個(gè)默認(rèn)值。

不用考慮基于字體大小（em）的設(shè)計(jì)。

在Chrome3.0之后的中文版中，字體大小最小值是12px，比如你設(shè)置最小字體為10px，最后也變成12px。

• 這是一個(gè)經(jīng)驗(yàn)值, 不同的產(chǎn)品對這個(gè)值要求可能不同, 但我們一般會(huì)設(shè)置最常用的為默認(rèn)值.

即字體大小默認(rèn)值是13px，行高是131.231=16.003px，默認(rèn)的行高是默認(rèn)字體的1.231倍。 對于中文來說，常用的字體大小12px、14px、16px、18px等偶數(shù)大小， 在IE6和IE7設(shè)置其行高也為偶數(shù)能解決一些特殊情況下的字體對其問題。</p>

• 在IE6和IE7中，行高值必須大于字體的2px才能保證字體的完整顯示或當(dāng)其作為鏈接時(shí)能有效顯示下劃線。

• 設(shè)置line-height時(shí)，注意不要使用單位（包括%在內(nèi)）， 因?yàn)樽庸?jié)點(diǎn)會(huì)繼承經(jīng)過運(yùn)算后的line-height值， 所以當(dāng)使用單位后瀏覽器會(huì)把line-height計(jì)算成第一次定義的絕對值， 而不會(huì)隨著字體大小的變化而變化，而無單位的數(shù)值表示是所在容器的font-size的倍數(shù)， 所以設(shè)置為無單位的數(shù)值是最佳選擇。

• 深入CSS 行高非常有利于理解line-height，值得一讀。

大部分平臺(tái)都有arial，減少瀏覽器的查找時(shí)間。

代碼最少，書寫方便。arial基本上是名字最短的字體了，可以節(jié)約CSS的大小。

所有的字母都小寫，目前Google就是這樣做的，好處是既可以編寫更快也能提升Gzip壓縮的效率。

中文最好用unicode表示，比如使用宋體是{font-family:\5b8b\4f53;}， 使用微軟雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}， 這樣的好處是避免編碼問題，同時(shí)能得到所有的主流瀏覽器的支持。

使用正確的字體種類寫法，避免使用引號(hào)，這樣可以縮小CSS的大小。

未來

通過對中英文及符號(hào)混排的測試, 我發(fā)現(xiàn)微軟雅黑其實(shí)表現(xiàn)相當(dāng)不錯(cuò), 包括英文數(shù)字和英文字符以及在IE6和IE7的顯示效果上, 但唯一的遺憾是在XP下如果安裝了微軟雅黑字體的用戶沒有打開“使用屏幕字體的邊緣平滑”選項(xiàng)的話， 在Firefox、Safari和Opera、特別是IE6下會(huì)非常模糊難以辨認(rèn)。 針對這個(gè)問題目前并沒有很好的解決方案，所以只有等到IE6使用比率非常小的時(shí)候才可能正式的使用它。 或許需要到2014年，XP死掉的時(shí)候。

雖然很早就有了@font-face，但是瀏覽器的支持、網(wǎng)速和商業(yè)問題，導(dǎo)致它很少被應(yīng)用。 最近關(guān)于字體的好消息是Firefox3.6將支持Web Open Font Forma。 關(guān)于Web字體未來的相關(guān)信息可以看Web 字體的未來、關(guān)于 Web 字體： 現(xiàn)狀與未來和再談 Web 字體的現(xiàn)狀與未來。

文章來源：http://justjavac.com/web/2012/04/13/default-web-font-style/

轉(zhuǎn)載于:https://www.cnblogs.com/lanzhi/archive/2012/04/16/6468508.html

總結(jié)

以上是生活随笔為你收集整理的默认Web字体样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。