乾貨！2019年你確定要錯過這份優秀Web字體清單嗎？

就設計元素而言，90%的網頁設計歸結起來就兩個要素：圖片、字體。字體作爲設計之魂，其重要性不言而喻。茫茫網海中，尋找滿意的字體猶如大海撈針。由於經費原因，大家往往在付費與免費字體之間徘徊。別急，Mockplus的小夥伴們爲大家整理了一份高質量的字體清單，付費免費都可以滿足。希望Mockplus的努力能爲你優秀的設計盡上一份綿薄之力。

小提示：請各位設計師養成良好的使用習慣，使用之前，請務必檢查字體使用條款哦~

字體安全很重要

何爲“安全”字體？--Web安全字體是通常預裝到大多數設備的字體- 計算機，移動電話，智能電視和平板電腦。

爲什麼Web安全字體很重要？

理想狀態下，你可以選擇任何想要的網站字體。而實際上，你可以使用的字體類型是有限的。大多數計算機和Web瀏覽器都帶有一組由製造商預先安裝的字體，但是它們的設計通常都不相同。

如果你使用的字體未安裝在用戶的計算機上，那麼你的網站將恢復爲通用字體，造成的結果是用戶的設備無法讀取該字體或顯示爲設備上的默認字體。這對於網頁的UI設計以及用戶體驗是非常不友好的。如果你想保持網站的設計和視覺品牌一致，那麼使用網絡安全字體可確保你的網站在不同的設備上完全按照你的預期所顯示。

例如，大家在使用Mockplus時也會遇到網頁端預覽字體與手機端預覽字體不一致的問題，同樣也是這個原因。所以大家在使用Mockplus的時候遇到字體問題先排查一下電腦中是否有安裝對應的字體哦~

字體應用建議

1. 選擇基準字體

一般來說，字體主要分爲以下四種：

帶襯線字體
無襯線字體
手寫體
裝飾體

2. 選擇大於 12 磅的字號

3. 注意文字長度

4. 注意間距

10款安全的web字體集錦（附下載地址和CSS下載地址）

1. Arial

Arial字體是過去30年來使用最廣泛的設計之一。由Monotype Imaging設計師RobinNicholas和PatriciaSaunders於1982年在早期的IBM激光打印機中使用。由於Arial在大型和小型尺寸以及各種應用中都易於閱讀，因此Arial幾十年來一直是主要的屏幕字體。

適用範圍：廣告，書籍設計，辦公室通信，海報、大型平面廣告

下載字體

CSS字體堆棧

2. Calibri

微軟發佈的Calibri及其在許多應用程序中作爲默認字體的實現得到了普遍認可。它是一種人文主義的無襯線字體，以其溫暖和圓潤的線條而聞名。Calibri的緊湊佈局使其具有靈活性，可以在各種文本尺寸下工作。

適用範圍：數字媒體

下載字體

CSS字體堆棧

3. Times New Roman

在西文中，最常見的字體莫屬Times New Roman 。這個帶襯線字體來源於英國《泰晤士報》。1929年，字體專家Stanley Morison 批評了《時代》雜誌的字體難讀又難看。雜誌社的人接受了他的批評，並請他設計出了一款新的、適合雜誌閱讀的字體。於是Morison 和雜誌社內部的Victor Lardent 合作設計了這款著名的Times New Roman。

Morison 一開始是建議在 Plantin 的基礎上進行改進設計，但爲了兼容可讀性以及對於空間的節省，最終做出了字體的重大改動：筆觸之間的對比做了加強，從而營造出一種乾脆的感覺。

適用範圍：書籍，期刊，年度報告，小冊子，報紙

字體下載

CSS字體堆棧

4. Helvetica

Helvetica是最廣泛使用的無襯線字體之一，由Max Miedinger 和 EduardHoffman 在1957 年創建。這個字體的中性化設計讓它迅速在各種應用中走紅。由於它良好的使用性，Helvetica無處不在，也一直是企業標識的流行選擇。此外，Helvetica被美國政府廣泛使用，美國稅單上採用的就是Helvetica字體。

適用範圍：品牌商標

字體下載

CSS字體堆棧

5. Tahoma

Tahoma是一個十分常見的無襯線字體，字體結構和Verdana很相似，其字符間距較小，而且對Unicode字集的支援範圍較大。Tahoma 和Verdana師出同門，同爲名設計師馬修卡特的作品，由微軟在1999 年推出。許多不喜歡Arial字體的人常常會改用Tahoma來代替，除了是因爲Tahoma很容易取得之外，也是因爲Tahoma沒有一些Arial爲人詬病的缺點，例如大寫“I”與小寫“l”難以分辨等。

適用範圍：屏幕對話框、菜單

字體下載

CSS字體堆棧

6. Georgia

Georgia是一種襯線字體，爲著名字型設計師馬修卡特（Matthew Carter）於1993年爲微軟所設計的作品，具有在小字下仍能清晰辨識的特性，可讀性十分優良，是 Windows系統的內建字型之一。蘋果電腦的麥金塔系統之後也跟進採用Georgia作爲內建字型之一。

適用範圍：電子書，手機，電腦網頁

字體下載

CSS字體堆棧

7. Verdana

Verdana 是 Matthew Carter 爲微軟公司設計的一款無襯線字體。跟字體 Frutiger 一樣， Verdana 設計理念是適應那時低分辨率的電腦屏幕。Verdana字符的寬大和寬度是這些字體在屏幕上易讀性的關鍵。儘管Verdana字體系列的尺寸很小，但它的分辨率更高，字體最受歡迎。

宜家從2010年起拋棄了使用多年的Futura, 轉而投向了Verdana 的懷抱。據宜家的解釋，這種轉變的原因是爲了保證字體能適應各種國家的文字（之前的宜家字體不能兼容亞洲文字），從而保證宜家設計風格的一致性。可見Verdana 在國際化適應範圍上是比較廣的。

適用範圍：電子書，手機，電腦網頁

字體下載

CSS字體堆棧

8. Optima

Optima字體是由著名設計師Hermann Zapf設計的清晰精確的字體。Optima的靈感來自古典羅馬銘文。Optima字體的曲線和直線的厚度略有不同，容易留下優雅和清晰的印象。因此，Optima常用於傳達經典理想以及當前趨勢。例如，皮膚護理巨頭雅詩蘭黛（EstéeLauder）將其用作官方字體設計。

適用範圍：海報設計、書籍裝幀、畫冊封面、產品包裝設計

字體下載

CSS字體堆棧