網頁設計中最經常使用的字體

英文字體

Sans-serif

前端

  1. Helvetica: 被評爲設計師最愛的字體,Realist風格,簡潔現代的線條,很是受到追捧。在Mac下面被認爲是最佳的網頁字體,在Windows下因爲Hinting的緣由顯示很糟糕。
  2. Arial: Helvetica的「克隆」,和Helvetica很是像,細節上好比R和G有小小差異。若是字號過小,文字太多,看起來會有些累眼。Win和Mac顯示都正常
  3. Lucida Family: Lucida Grande是Mac OS UI的標準字體,屬於humanist風格,稍微活潑一點。Mac下的顯示要比Win下好。
  4. Verdana: 專門爲了屏顯而設計的字體,humanist風格,在小字號下仍能夠清楚顯示,可是字體細節缺失嚴重,最好別作標題。
  5. Tahoma: 也是humanist風格,字體和Verdana有點像,可是略窄一些,counter略小,曾經是Windows的標準字體,Mac 10.5以後默認也有安裝。
  6. Trebuchet MS: 爲微軟設計的一個humanist風格字體,我的以爲個性太過突出,用得很差會不搭。
  7. Verdana,是一套無襯線字體,因爲它在小字上仍有結構清晰端整、閱讀辨識容易等高品質的表現,於是在1996年推出後即迅速成爲許多領域所愛用的標準字型之一。


Serif瀏覽器

    1. Georgia: 基本上適合正文屏顯的襯線字體,非Georgia莫屬了。筆畫粗重,襯線明線,輪廓較大,小字體顯示也很清晰,同時細節還算OK。
    2. Times: Times是爲了報紙而設計的,特色是能夠在有限的空間塞進去更多的文字,筆畫較弱,小字號正文屏顯看起來累眼。曾經Engadget改版的時候用了Times做爲正文,被罵得很慘以後換成了Georgia。

有些偏藝術類的網站的大字會使用lobster。更藝術的網站就搜索free font,或者font freebie吧,出現的名字格式爲「X種免費網頁設計字體」的博客文章,都進去看一眼,挑一個就好。前端工程師

Trebuchet、Georgia、Times New Roman、Arial、Lucida等字體在26px或更大像素時效果是比較好的,很是適合做爲正文的標題。字體

 

中文字體網站

  1. 中易宋體:Win最多見的字體,小字體點陣,大字體TrueType,可是大字體並很差看,因此最好別作標題。
  2. 微軟雅黑:Vista以後新引入的字體,打開Cleartype以後顯示效果不錯,不開Cleartype發虛。
  3. 華文細黑:Mac下的默認中文。
  4. Droid Sans和衍生的WenQuanYi Microhei:Andriod中的中文,也是Linux絕大多數發行版本的默認中文,,固然也有用WenQuanyi Zenhei的,不過比較少了。

若是是中文字體,設計的時候最好使用微軟雅黑。微軟雅黑配上h3比較好看。
由於前端工程師在實現網站的時候,可以使用的中文字體侷限於一下幾種:
宋體、微軟雅黑、Lucida Grande(蘋果官方網站使用的中文字體)。

爲何?
電腦系統有自帶的字體,PS 有自帶的字體,瀏覽器也有自帶的字體。然而瀏覽器自帶的字體頗有限。這又是爲何?英文字體,26個英文字母+數字+符號就能夠了 。然而中文漢字的數量是很是龐大的。致使文件的體積也很大。

另外前端可使用 @font-face 調用一些其餘的字體庫,弊端是,用戶在訪問的時候要去下載這個文件,因此會影響整個網站的效率。 spa

相關文章
相關標籤/搜索