標籤：

網頁設計中最常用的字體有哪些？（中文和英文）

01-03

我比較熟悉英文，一個一個字體說：

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風格字體，個人覺得個性太過突出，用得不好會不搭。

Serif

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

中文不熟，拋磚引玉：

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

CSS3開始支持Embedded font所以英文字體選擇一下子多了很多，而中文字體由於文件龐大，仍然就是那幾個選。

中文你沒得選，能看得過去的數據量都大的要死，對我是做了 Inziu，但打死我都不在網頁上用，你願意打開個頁面就燒掉 50M 的流量嗎？

西文反正有 webfont，隨便用，typekit 之類都會幫你把 SFNT 的奇葩數據整理好的

中英文字體，上4張圖！它們一直都是常用的web安全字體，怎麼使用看自己的搭配能力。沒有過時的說法，用得好也能讓網頁非常漂亮。其它的第三方字體要看著辦，考慮載入和速度問題。

補充：Mac系統現在最新的中文字體是蘋方。

經典英文字體推薦：

Centaur

具有史詩般正統風格，特別適合用於表現年代悠久。具體排版時注意合字和老式數字的使用。

Garamond

復古傳統，沒有強烈個性，十分易於閱讀，因為太流行所以很多大的公司都做過Garamond復刻，蘋果電腦里有系統字Garamond以及Adobe所製作的Adobe Garamond Pro。 如果是希望web上使用，可以考慮EB Garamond。

Caslon

美國獨立宣言用字，是活字時代的大熱字體。很多公司也做過Caslon復刻，現在的使用也非常廣泛。

Baskerville

過渡期羅馬體(舊體到現代體)的代表性字體，非常經典，給人古典、高貴的感覺。

Didot

現代襯線體，髮絲襯線。特點是強烈的筆畫粗細對比和水平襯線，時尚，現代，優美。

Franklin Gothic

這款字體是很早出現的無襯線體，所以帶有古風，筆畫粗狂有力，具有男性化感覺，適合表現強有力。Web字體可以考慮Oswald。

Futura

Futura是拉丁語未來的意思，現代且具有幾何特徵，感覺是現在的主流大熱字體，尤其是要突出時尚，設計感的時候可以使用。製作過程中受到包豪斯運動的影響。是LV的商標用字，也是現在很多雜誌的首選字體。

Gill Sans

英國風格的代表字體，具有古典風格的骨架，但是又有很強的科技感和未來感，字體外形偏幾何，但是是humanist字體，相對futura會柔和一些。

Opima

有古典氣息，筆畫兩端比較粗中間比較細，氣質優雅。時代周刊的字體更換，雅虎2013年使用Optima作為全新標識的設計基準都證明了這款字體的熱度。

Univers

Grotesque字體，比Helvetica更加簡練。字體家族非常全面，所以搭配使用很方便。

Myriad

Humanist字體，很早就已經流行，隨著蘋果的廣泛使用更加引人注目，筆畫柔和簡潔。

Avenir

字形簡潔，現代，雖然也有幾何特徵，但是不失人情味。Avenir是法語未來的意思，對同樣未來含義的Futura是一種挑戰，放大x-height，降部拉長，使得文字的易讀性明顯提高。字體家族也很完整。

再提兩句Helvetica，內部分享的時候很多設計師問到為什麼沒有作為一個推薦字體在這裡列出，一方面是因為Helvetica已經作為現代字體中的經典字體被應用得非常廣泛了，並不缺乏關注。另一方面Helvetica是Neo-grotesque字體，結構嚴謹，沒有情緒導向，提供著強烈的安全感，好像怎麼用都不會錯，這是個優勢也是個劣勢，當我們的設計有比較明確的受眾群體或者設計對象有比較明確的氣質的時候能夠尋找到有同樣氣質的字體會是更優的選擇。

更多詳解可參考關注設計細節 如何選擇合適的英文字體

個人比較喜歡Windows Phone 應用 + 遊戲應用商店(中華人民共和國)風格的字體。font-family: "Segoe UI", Helvetica, Arial, sans-serif;

Verdana，是一套無襯線字體，由於它在小字上仍有結構清晰端整、閱讀辨識容易等高品質的表現，因而在1996年推出後即迅速成為許多領域所愛用的標準字型之一。

CSS font-family 屬性：

  • 設計師常用字體下載――平面設計師，網頁設計師，動畫設計師常用必備字體

  • 網頁設計常用字體

情人眼裡出西施，沒有標準答案，看你自己喜歡。為了好好答這個題，我也是挺下功夫的，下面是我的實驗結果：

1.Cursive

看起來很輕鬆活潑的，感覺還是挺不錯。

2. Sans-serif

3. Lucida

4. Serif

個人感覺太方方正正的了，有點兒死板。

5. Trebuchet MS:

6. Verdana

實驗了一下後，感覺個人比較喜歡Cursive 或 Lucida。

最後打個小廣告，我的個人網站是 www.caryleo.com, 歡迎小夥伴~~~

Helvetica系列

方正蘭亭系列

宋體

能應付大部分了

這取決於

1. 你的產品要在哪個系統上運行

2. 你的產品是純英文還是中文英文甚至還有其他國家語言

為什麼這麼說？

字體一直都是讓設計師和工程師頭疼的問題。

如果參與過產品的設計和開發，會發現經常有以下這種情況出現：

1. 對比視覺稿和實現出來的網頁，其他地方都很完美，就字體不給力。

2. 在 Mac 上很好看，在 Windows 上丑的要死；iPhone 和 Android 又不同……

為什麼？

真正的幕後黑手是系統。

瀏覽器使用哪種字體取決於：

1. 你的系統安裝了哪些字體（我原來以為瀏覽器自己也會帶字體，這是錯誤的，感謝知友的提醒）

2. 工程師有沒有讓用戶去下載其他字體

看看知乎專欄和蘋果官網在網頁中使用了哪些字體：

知乎專欄："Open Sans","Helvetica Neue",Arial,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif

蘋果官網："Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif

有些設計師會問，怎麼會有這麼多字體？

打個比喻：

可以想一下去超市買脈動的情景：

我最希望買到的是菠蘿味，其次是藍莓、橘子、荔枝……這些都沒有就礦泉水

瀏覽器會這樣去選擇：

知乎專欄為例，從前往後，"Open Sans"，"Helvetica Neue"……

有人會問，為什麼不自己帶脈動？

沉啊。

對於網站來說，下載個字體還是要費很大勁的。英文字體 26個大寫+26個小寫+標點符號不是很多，但中文漢字的數量…… 所以很少有網站會去讓用戶去下載中文字體的。

最優解：

你可以使用多種字體，看一下在每種字體上的效果。把效果最好的字體放在最前面，在後面多加幾個後備軍。

Open Sans 的中文字體在 Mac 上效果不錯。

微軟雅黑的中文字體在 Windows 上效果不錯。

Reference:

Mozilla Developer Network 對 font-family 的解釋：

font-family - CSS

網頁中字體選擇是根據系統決定的，在頁面的 body {

font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "微軟雅黑", Helvetica, Arial, Verdana, sans-serif;

mac 用戶優先選擇蘋方，win 用戶優先選微軟雅黑。

當然也可以使用css3 的@font-face 引入，詳見：CSS3 字體

在最理想的情況下(不考慮兼容舊設備)，font-family: sans-serif; 就是最好的選擇。

那些說用微軟雅黑、宋體、Arial, Segoe ui 的，恐怕思維還停留在十年前的 Eindows 上吧？然而現在看網頁大部分情況是手機了吧？你讓安卓和蘋果設備上顯示微軟雅黑看看？

如果是內容導向的網頁，比如知乎，不設計字體就是最好的設計。

如果真的是需要字體設計的網頁，那還真沒有常用字體一說，看需求。

微軟雅黑 黑體 宋體 華文楷體

中文字體里幼圓、圓體比較適合扁平化設計風格。

做了7年多網頁設計，給你推薦下吧。

中文字體用的最多的是微軟雅黑，黑體，宋體，和目前較為流行的思源黑體。特殊字體一般需要設計成圖片才顯示，雖然現在有技術可以再伺服器載入特殊字體，但是速度很慢。

英文字體推薦：AkzidenzGrotesk、Bodoni、Helvetica、Helvetica Neue Pro、Neosans、proxima、Didot、Futura

也歡迎愛設計的童鞋關注我的訂閱號，有ps教程+設計資訊+職場答疑哦！

http://weixin.qq.com/r/zjo_JkPETR4yrQdF92-c (二維碼自動識別)

如有打擾，請見諒！

網頁設計中最常用的字體是黑體、微軟雅黑、宋體。英文字體可以隨意的，網頁設計出來美觀就好了。我知道一個好的網站叫驚喜設計，你可以去那上面看看。

我只能說window下[微軟雅黑]是最好的中文字體了

推薦閱讀：

※css content 如何自定義生成圖標？
※為什麼在美國亞馬遜的頁面用戶賬戶顯示「Your Account」，而中國亞馬遜卻顯示「我的賬戶」？
※underscore.js源碼，這個正則表達式是什麼意思?
※三大構成是什麼？
※為何大部分設計出眾的網站都做不大？

TAG:網頁設計 | 字體 | CSS | CSS3 |