生活随笔
收集整理的這篇文章主要介紹了
网页设计中的默认字体样式详解
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
瀏覽器默認(rèn)的樣式往往在不同的瀏覽器、不同的語(yǔ)言版本甚至不同的系統(tǒng)版本都有不同的設(shè)置,這就導(dǎo)致如 果直接利用默認(rèn)樣式的頁(yè)面在各個(gè)瀏覽器下顯示非常不一致,于是就有了類(lèi)似YUI的reset之類(lèi)用來(lái)盡量重寫(xiě)瀏覽器的默認(rèn)設(shè)置保證各個(gè)瀏覽器樣式一致性的做法。
拿字體來(lái)說(shuō),各個(gè)瀏覽器默認(rèn)的字體種類(lèi)、字體大小和字體行高都不一樣,比如IE8的中文版在Windows XP下顯示網(wǎng)頁(yè)時(shí)默認(rèn)字體是宋體,而英文版肯定不會(huì)如此。所以我們需要統(tǒng)一設(shè)置默認(rèn)的字體樣式,以便實(shí)現(xiàn)一致的顯示效果來(lái)保證設(shè)計(jì)的一致性和提高開(kāi)發(fā)效率。
樣式優(yōu)先級(jí) 通常用戶(hù)看到的頁(yè)面的樣式會(huì)受到三層控制:
第一層是瀏覽器的默認(rèn)樣式 第二層是網(wǎng)頁(yè)定義樣式 第三層是用戶(hù)自定義樣式 和CSS一樣,后面的優(yōu)先級(jí) 高于前面的,也就是說(shuō)網(wǎng)頁(yè)定義樣式可以覆蓋瀏覽器的默認(rèn)樣式,而用戶(hù)自定義樣式優(yōu)先級(jí)最高。不過(guò),當(dāng)有 !important 時(shí),網(wǎng)頁(yè)樣式可以覆蓋用戶(hù)自定義樣式。用戶(hù)!important > 網(wǎng)頁(yè)!important > 用戶(hù) > 網(wǎng)頁(yè) > 瀏覽器默認(rèn) 。
字體:arial 我們頁(yè)面的絕大部分內(nèi)容字符都是中文,毫無(wú)疑問(wèn)目前為止在網(wǎng)頁(yè)上最常用也是最通用的顯示中文的字體是宋體,但是宋體在顯示英文、數(shù)字和英文符號(hào)時(shí)過(guò)于糟糕,比如?字符,所以我們一般期望通過(guò)CSS來(lái)實(shí)現(xiàn)用更好的字體樣式來(lái)顯示它們,然后用宋體來(lái)顯示中文和中文符號(hào)。之所以選擇arial是因?yàn)?#xff1a;
Windows和Mac都預(yù)裝了這款字體,應(yīng)該是使用最廣泛的網(wǎng)頁(yè)字體了。它的潛在對(duì)手tahoma和helvetica就沒(méi)有這么幸運(yùn)了。 視覺(jué)設(shè)計(jì)的專(zhuān)業(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)字體。所以從美觀和可讀性上來(lái)講arial應(yīng)該是完全可以接受的。 一般情況下設(shè)置font-family都會(huì)在最后設(shè)置通用字體族以保證其安全性,比如Google的設(shè)置為font-family:arial,sans-serif;,但是至少在非中文版的Win7下當(dāng)編碼是GBK時(shí),IE8會(huì)因sans-serif來(lái)渲染宋體,導(dǎo)致字體出現(xiàn)變形,這就是為什么淘寶需要在sans-serif前加上宋體而Google無(wú)需這樣做的原因。 因?yàn)橹形淖煮w的選擇非常有限,所以目前所有的主流瀏覽器都設(shè)置使用宋體來(lái)顯示中文。Baidu的首頁(yè)和搜索結(jié)果頁(yè)使用font-family:arial;可以從側(cè)面說(shuō)明這樣做的安全性??赡苡腥俗⒁獾紽irefox中國(guó)版默認(rèn)顯示的中文字體是微軟雅黑,這是因?yàn)橹\智網(wǎng)絡(luò)擅自修改了用戶(hù)自定義樣式,不允許網(wǎng)頁(yè)的樣式覆蓋瀏覽器設(shè)置的樣式。也是由于類(lèi)似的情況,我們要彈性設(shè)計(jì)網(wǎng)頁(yè)非常重要。 使用英文字體作為第一默認(rèn)字體會(huì)導(dǎo)致的問(wèn)題之一就是中英文以及符號(hào)混排時(shí)的對(duì)齊問(wèn)題、通過(guò)設(shè)置行高和hasLayout能解決絕大部分情況,但是都不會(huì)很完美,如果把字體改成“宋體”能徹底的解決問(wèn)題。很明顯,這個(gè)問(wèn)題只出現(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)品的需要來(lái)修改這個(gè)默認(rèn)值。 不用考慮基于字體大小(em)的設(shè)計(jì)。 在Chrome3.0之后的中文版中,字體大小最小值是12px,比如你設(shè)置最小字體為10px,最后也變成12px。 行高:1.5倍 這是一個(gè)經(jīng)驗(yàn)值,不同的產(chǎn)品對(duì)這個(gè)值要求可能不同,但我們一般會(huì)設(shè)置最常用的為默認(rèn)值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字體大小默認(rèn)值是13px,行高是13*1.231=16.003px,默認(rèn)的行高是默認(rèn)字體的1.231倍。對(duì)于中文來(lái)說(shuō),常用的字體大小12px、14px、16px、18px等偶數(shù)大小,在IE6和IE7設(shè)置其行高也為偶數(shù)能解決一些特殊情況下的字體對(duì)其問(wèn)題。 在IE6和IE7中,行高值必須大于字體的2px才能保證字體的完整顯示或當(dāng)其作為鏈接時(shí)能有效顯示下劃線(xiàn)。 設(shè)置line-height時(shí),注意不要使用單位(包括%在內(nèi)),因?yàn)樽庸?jié)點(diǎn)會(huì)繼承經(jīng)過(guò)運(yùn)算后的line-height值,所以當(dāng)使用單位后瀏覽器會(huì)把line-height計(jì)算成第一次定義的絕對(duì)值,而不會(huì)隨著字體大小的變化而變化,而無(wú)單位的數(shù)值表示是所在容器的font-size的倍數(shù),所以設(shè)置為無(wú)單位的數(shù)值是最佳選擇。 深入CSS 行高非常有利于理解line-height,值得一讀。 性能和效率 大部分平臺(tái)都有arial,減少瀏覽器的查找時(shí)間。 代碼最少,書(shū)寫(xiě)方便。arial基本上是名字最短的字體了,可以節(jié)約CSS的大小。 所有的字母都小寫(xiě),目前Google就是這樣做的,好處是既可以編寫(xiě)更快也能提升Gzip壓縮的效率。 中文最好用unicode表示,比如使用宋體是{font-family:\5b8b\4f53;},使用微軟雅黑是{font-family:\5fae\8f6f\96c5\9ed1;},這樣的好處是避免編碼問(wèn)題,同時(shí)能得到所有的主流瀏覽器的支持。 使用正確的字體種類(lèi)寫(xiě)法,避免使用引號(hào),這樣可以縮小CSS的大小。中文字體可以按上一條方式來(lái)編寫(xiě)。 未來(lái) 通過(guò)對(duì)中英文及符號(hào)混排的測(cè)試, 我發(fā)現(xiàn)微軟雅黑其實(shí)表現(xiàn)相當(dāng)不錯(cuò),包括英文數(shù)字和英文字符以及在IE6和IE7的顯示效果上,但唯一的遺憾是在XP下如果安裝了微軟雅黑字體的用戶(hù)沒(méi)有打 開(kāi)“使用屏幕字體的邊緣平滑”選項(xiàng)的話(huà),在firefox、Safari和Opera、特別是IE6下會(huì)非常模糊難以辨認(rèn)。針對(duì)這個(gè)問(wèn)題目前并沒(méi)有很好的 解決方案,所以只有等到IE6使用比率非常小的時(shí)候才可能正式的使用它?;蛟S需要到2014年,XP死掉的時(shí)候。 雖然很早就有了@font-face,但是瀏覽器的支持、網(wǎng)速和商業(yè)問(wèn)題,導(dǎo)致它很少被應(yīng)用。最近關(guān)于字體的好消息是Firefox3.6將支持Web Open Font Forma。關(guān)于Web字體未來(lái)的相關(guān)信息可以看Web 字體的未來(lái)、關(guān)于 Web 字體:現(xiàn)狀與未來(lái)和再談 Web 字體的現(xiàn)狀與未來(lái)。 原文地址: 默認(rèn)Web字體樣式 @ 隨網(wǎng)之舞 有興趣的朋友還可以看一下另一篇針對(duì)該文進(jìn)行補(bǔ)充的《再談 Web 默認(rèn)字體》
來(lái)源于 網(wǎng)頁(yè)設(shè)計(jì)中的默認(rèn)字體樣式詳解 | 帕蘭映像
轉(zhuǎn)載于:https://www.cnblogs.com/icycore/archive/2012/03/27/2419651.html
總結(jié)
以上是生活随笔 為你收集整理的网页设计中的默认字体样式详解 的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò),歡迎將生活随笔 推薦給好友。