web前端開發(fā)【連載4】-前端字體

時間：2023-05-28 16:21:02 | 來源：網(wǎng)站運(yùn)營

時間：2023-05-28 16:21:02 來源：網(wǎng)站運(yùn)營

web前端字體

1. 在Web編碼中，CSS默認(rèn)應(yīng)用的Web字體是有限的，雖然在新版本的CSS3，我們可以通過新增的@font-face屬性來引入特殊的瀏覽器加載字體。
   　　 瀏覽器中展示網(wǎng)頁文字內(nèi)容時，文字字體都會按照設(shè)計師在css中定義的字體族的順序來進(jìn)行顯示。什么是字體族？字體族就是你在css代碼中看到“font-family”的代碼內(nèi)的一類字體名稱，例如下面這行代碼：
   font-family:"Comic Sans MS","幼圓","黑體",sans-serif;
   　　按照W3C標(biāo)準(zhǔn)，瀏覽器在解析一行代碼時首先會在系統(tǒng)中查找Comic Sans MS字體，如果系統(tǒng)內(nèi)存在這個字體那么瀏覽器就會使用Comic Sans MS字體，如果沒有的話就接著查找幼圓字體，以此類推直到瀏覽器可以表達(dá)系統(tǒng)存在的字體為止。
   　　注意了，“sans-serif”不是某個字體的名稱，而是一種在前面敘述的字體都無效時而最終選用的字體，稱為瀏覽器通用字體，它取決于你所用的瀏覽器默認(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 字體，每個字母的寬度相等，通常用于計算機(jī)相關(guān)書籍中排版代碼塊。
   　　fantasy 和 cuisive 字體在瀏覽器中不常用，在各個瀏覽器中有明顯的差異。
3. 網(wǎng)頁常用字體
   Sans-serif，Helvetica: 被評為設(shè)計師最愛的字體，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è)計的字體，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è)計的一個humanist風(fēng)格字體，個人覺得個性太過突出，用得不好會不搭。
   Serif，Georgia: 基本上適合正文屏顯的襯線字體，非Georgia莫屬了。筆畫粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細(xì)節(jié)還算OK。
   Times: Times是為了報紙而設(shè)計的，特點(diǎn)是可以在有限的空間塞進(jìn)去更多的文字，筆畫較弱，小字號正文屏顯看起來累眼。曾經(jīng)Engadget改版的時候用了Times作為正文，被罵得很慘之后換成了Georgia。
   中文，宋體：Win最常見的字體，小字體點(diǎn)陣，大字體TrueType，但是大字體并不好看，所以最好別做標(biāo)題。
   微軟雅黑：Vista之后新引入的字體，打開Cleartype之后顯示效果不錯，不開Cleartype發(fā)虛。
   華文細(xì)黑：Mac下的默認(rèn)中文。