最近江蘇都是陰雨連綿，但是不管天氣怎么不好，我們都要保持一個(gè)好心情哦O(∩_∩)O~
粘人的傻球
web前端字體
在做頁(yè)面的時(shí)候都會(huì)遇到各種字體，根據(jù)UI的設(shè)計(jì)，不同的模塊可能會(huì)用到不同的字體，但是每次都是根據(jù)UI的設(shè)計(jì)稿來(lái)獲取字體，但是作為前端開(kāi)發(fā)，連最基本的字體種類都不知道，今天就來(lái)全面的整理一下，有時(shí)候各種不協(xié)調(diào)就敗在字體上面：
- 在Web編碼中，CSS默認(rèn)應(yīng)用的Web字體是有限的，雖然在新版本的CSS3，我們可以通過(guò)新增的@font-face屬性來(lái)引入特殊的瀏覽器加載字體。
瀏覽器中展示網(wǎng)頁(yè)文字內(nèi)容時(shí)，文字字體都會(huì)按照設(shè)計(jì)師在css中定義的字體族的順序來(lái)進(jìn)行顯示。什么是字體族？字體族就是你在css代碼中看到“font-family”的代碼內(nèi)的一類字體名稱，例如下面這行代碼：
font-family:"Comic Sans MS","幼圓","黑體",sans-serif;
按照W3C標(biāo)準(zhǔn)，瀏覽器在解析一行代碼時(shí)首先會(huì)在系統(tǒng)中查找Comic Sans MS字體，如果系統(tǒng)內(nèi)存在這個(gè)字體那么瀏覽器就會(huì)使用Comic Sans MS字體，如果沒(méi)有的話就接著查找幼圓字體，以此類推直到瀏覽器可以表達(dá)系統(tǒng)存在的字體為止。
注意了，“sans-serif”不是某個(gè)字體的名稱，而是一種在前面敘述的字體都無(wú)效時(shí)而最終選用的字體，稱為瀏覽器通用字體，它取決于你所用的瀏覽器默認(rèn)的通用字體是什么，可能是“Arial”，也有可能是“Helvetica”。 - 網(wǎng)頁(yè)常用字體通常分為5類：serif(襯線)、sans-serif(無(wú)襯線)、monospace(等寬)、fantasy(夢(mèng)幻)、cuisive(草體)，這些通用的名稱允許用戶代理從相應(yīng)集合中選擇一款字體。
serif 字體在字符筆畫(huà)末端有叫做襯線的小細(xì)節(jié)，這些細(xì)節(jié)在大寫(xiě)字母中特別明顯。
sans-serif 字體在字符筆畫(huà)末端沒(méi)有任何細(xì)節(jié)，與serif字體相比，他們的外形更簡(jiǎn)單。
monospace 字體，每個(gè)字母的寬度相等，通常用于計(jì)算機(jī)相關(guān)書(shū)籍中排版代碼塊。
fantasy 和 cuisive 字體在瀏覽器中不常用，在各個(gè)瀏覽器中有明顯的差異。 - 網(wǎng)頁(yè)常用字體
Sans-serif:
Helvetica: 被評(píng)為設(shè)計(jì)師最愛(ài)的字體，Realist風(fēng)格，簡(jiǎn)潔現(xiàn)代的線條，非常受到追捧。在Mac下面被認(rèn)為是最佳的網(wǎng)頁(yè)字體，在Windows下由于Hinting的原因顯示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，細(xì)節(jié)上比如R和G有小小差別。如果字號(hào)太小，文字太多，看起來(lái)會(huì)有些累眼。Win和Mac顯示都正常
Lucida Family: Lucida Grande是Mac OS UI的標(biāo)準(zhǔn)字體，屬于humanist風(fēng)格，稍微活潑一點(diǎn)。Mac下的顯示要比Win下好。
Verdana: 專門(mén)為了屏顯而設(shè)計(jì)的字體，humanist風(fēng)格，在小字號(hào)下仍可以清楚顯示，但是字體細(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è)人覺(jué)得個(gè)性太過(guò)突出，用得不好會(huì)不搭。
Serif：
Georgia: 基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫(huà)粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時(shí)細(xì)節(jié)還算OK。
Times: Times是為了報(bào)紙而設(shè)計(jì)的，特點(diǎn)是可以在有限的空間塞進(jìn)去更多的文字，筆畫(huà)較弱，小字號(hào)正文屏顯看起來(lái)累眼。曾經(jīng)Engadget改版的時(shí)候用了Times作為正文，被罵得很慘之后換成了Georgia。
中文：
宋體：Win最常見(jiàn)的字體，小字體點(diǎn)陣，大字體TrueType，但是大字體并不好看，所以最好別做標(biāo)題。
微軟雅黑：Vista之后新引入的字體，打開(kāi)Cleartype之后顯示效果不錯(cuò)，不開(kāi)Cleartype發(fā)虛。
華文細(xì)黑：Mac下的默認(rèn)中文。
手機(jī)端字體思考可以參考：【原】移動(dòng)web頁(yè)面使用字體的思考
