1你辣、在Web編碼中旋廷，CSS默認(rèn)應(yīng)用的Web字體是有限的急前，雖然在新版本的CSS3京郑，我們可以通過新增的@font-face屬性來引入特殊的瀏覽器加載字體。
瀏覽器中展示網(wǎng)頁文字內(nèi)容時(shí)葫掉，文字字體都會按照設(shè)計(jì)師在css中定義的字體族的順序來進(jìn)行顯示些举。什么是字體族？字體族就是你在css代碼中看到“font-family”的代碼內(nèi)的一類字體名稱挖息，例如下面這行代碼：
font-family:"Comic Sans MS","幼圓","黑體",sans-serif;
按照W3C標(biāo)準(zhǔn)金拒，瀏覽器在解析一行代碼時(shí)首先會在系統(tǒng)中查找Comic Sans MS字體，如果系統(tǒng)內(nèi)存在這個(gè)字體那么瀏覽器就會使用Comic Sans MS字體套腹，如果沒有的話就接著查找幼圓字體绪抛，以此類推直到瀏覽器可以表達(dá)系統(tǒng)存在的字體為止。
注意了电禀，“sans-serif”不是某個(gè)字體的名稱幢码，而是一種在前面敘述的字體都無效時(shí)而最終選用的字體，稱為瀏覽器通用字體尖飞，它取決于你所用的瀏覽器默認(rèn)的通用字體是什么症副，可能是“Arial”，也有可能是“Helvetica”政基。
2贞铣、****網(wǎng)頁常用字體通常分為5類：serif(襯線)、sans-serif(無襯線)沮明、monospace(等寬)辕坝、fantasy(夢幻)、cuisive(草體)荐健，這些通用的名稱允許用戶代理從相應(yīng)集合中選擇一款字體酱畅。 serif 字體在字符筆畫末端有叫做襯線的小細(xì)節(jié)江场，這些細(xì)節(jié)在大寫字母中特別明顯纺酸。 sans-serif 字體在字符筆畫末端沒有任何細(xì)節(jié)址否，與serif字體相比餐蔬，他們的外形更簡單∮痈剑 monospace 字體用含，每個(gè)字母的寬度相等，通常用于計(jì)算機(jī)相關(guān)書籍中排版代碼塊帮匾。 fantasy 和 cuisive 字體在瀏覽器中不常用痴鳄，在各個(gè)瀏覽器中有明顯的差異瘟斜。
3、網(wǎng)頁常用字體
Sans-serif:
Helvetica: 被評為設(shè)計(jì)師最愛的字體，Realist風(fēng)格螺句，簡潔現(xiàn)代的線條虽惭，非常受到追捧。在Mac下面被認(rèn)為是最佳的網(wǎng)頁字體蛇尚，在Windows下由于Hinting的原因顯示很糟糕芽唇。Arial: Helvetica的「克隆」，和Helvetica非常像取劫，細(xì)節(jié)上比如R和G有小小差別匆笤。如果字號太小，文字太多谱邪，看起來會有些累眼炮捧。Win和Mac顯示都正常Lucida Family: Lucida Grande是Mac OS UI的標(biāo)準(zhǔn)字體，屬于humanist風(fēng)格惦银，稍微活潑一點(diǎn)咆课。Mac下的顯示要比Win下好。Verdana: 專門為了屏顯而設(shè)計(jì)的字體扯俱，humanist風(fēng)格书蚪，在小字號下仍可以清楚顯示，但是字體細(xì)節(jié)缺失嚴(yán)重迅栅，最好別做標(biāo)題殊校。Tahoma: 也是humanist風(fēng)格，字體和Verdana有點(diǎn)像库继，但是略窄一些箩艺，counter略小，曾經(jīng)是Windows的標(biāo)準(zhǔn)字體宪萄，Mac 10.5之后默認(rèn)也有安裝艺谆。Trebuchet MS: 為微軟設(shè)計(jì)的一個(gè)humanist風(fēng)格字體，個(gè)人覺得個(gè)性太過突出拜英，用得不好會不搭静汤。
Serif：
Georgia: 基本上適合正文屏顯的襯線字體，非Georgia莫屬了居凶。筆畫粗重虫给，襯線明線，輪廓較大侠碧，小字體顯示也很清晰抹估，同時(shí)細(xì)節(jié)還算OK。Times: Times是為了報(bào)紙而設(shè)計(jì)的弄兜，特點(diǎn)是可以在有限的空間塞進(jìn)去更多的文字药蜻，筆畫較弱瓷式，小字號正文屏顯看起來累眼。曾經(jīng)Engadget改版的時(shí)候用了Times作為正文语泽，被罵得很慘之后換成了Georgia贸典。
中文：
宋體：Win最常見的字體，小字體點(diǎn)陣踱卵，大字體TrueType廊驼，但是大字體并不好看，所以最好別做標(biāo)題惋砂。微軟雅黑：Vista之后新引入的字體妒挎，打開Cleartype之后顯示效果不錯(cuò)，不開Cleartype發(fā)虛班利。華文細(xì)黑：Mac下的默認(rèn)中文饥漫。
4、寫個(gè)小demo罗标，在各種瀏覽上測試了一下庸队，各種瀏覽器對這個(gè)字體的解析還是有差異的。
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>font</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><meta name="author" content="@my_programmer"><style type="text/css">/重置{/{ padding:0;margin:0;} img{border:0;} li{list-style:none;}/}重置*/div{font-size:1.2em;}</style></head><body>
--網(wǎng)頁字體通常分為5類-- <div style="font-family: sans-serif;">你好 hello world ?? sans-serif(無襯線) </div> <div style="font-family: serif;">你好 hello world ?? serif(襯線) </div> <div style="font-family: monospace;">你好 hello world ?? monospace(等寬) </div> <div style="font-family: fantasy;">你好 hello world ???? fantasy(夢幻) </div> <div style="font-family: cuisive;">你好 hello world ?? cuisive(草體) </div>
--無襯線類-- <div style="font-family: Helvetica, sans-serif;">你好 hello world ?? Helvetica </div> <div style="font-family: Arial, sans-serif;">你好 hello world ?? Arial </div> <div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world ?? Lucida Grande </div> <div style="font-family: Verdana,sans-serif;">你好 hello world ?? Verdana </div> <div style="font-family: Tahoma, sans-serif;">你好 hello world ?? Tahoma </div> <div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world ?? Trebuchet MS </div>
--襯線類-- <div style="font-family: Georgia, serif;">你好 hello world ?? Georgia </div> <div style="font-family: Times, serif;">你好 hello world ?? Times </div>
--中文字體-- <div style="font-family: 宋體">你好 hello world ?? 宋體 </div> <div style="font-family: 微軟雅黑">你好 hello world ?? 微軟雅黑 </div> <div style="font-family: 華文細(xì)黑">你好 hello world ?? 華文細(xì)黑 </div> <div style="font-family: 黑體">你好 hello world ?? 黑體 </div></body></html>
在chrome上顯示的結(jié)果 ****
**** 在ie8上顯示的結(jié)果 ******
**
********** 在firefox上顯示的結(jié)果**********
5闯割、在此次測試中發(fā)現(xiàn)：
android設(shè)備中各個(gè)瀏覽器都很不給力（ios的還沒有測試彻消，我想肯定也好不到哪去吧），android手機(jī)中各個(gè)瀏覽器支持的常用字體只有三種：
- *sans-serif(無襯線)類 : Arial; //只要設(shè)置成sans-serif類宙拉，不管什么字體宾尚，都一個(gè)樣子⌒怀海 serif(襯線)類 ：Georgia煌贴； //只要設(shè)置成serif類，不管什么字體锥忿，都一個(gè)樣子牛郑。 monospace(等寬)類 //只要設(shè)置成monospace類敬鬓，不管什么字體淹朋，都一個(gè)樣子。
