點擊上方[網頁設計自學平台]→右上角[...]→< strong >[設為星標★]
轉自 摹客
就設計元素而言，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幾十年來一直是主要的屏幕字體。
適用範圍：廣告，書籍設計，辦公室通信，海報、大型平面廣告
下載字體:
https://www.fonts.com/font/monotype/arial
CSS字體堆棧:
https://www.cssfontstack.com/arial
2. Calibri
微軟發布的Calibri及其在許多應用程序中作為默認字體的實現得到了普遍認可。它是一種人文主義的無襯線字體，以其溫暖和圓潤的線條而聞名。 Calibri的緊湊佈局使其具有靈活性，可以在各種文本尺寸下工作。
適用範圍：數字媒體
下載字體:
https://www.fonts.com/font/microsoft-corporation/calibri
CSS字體堆棧:
https://www.cssfontstack.com/calibri
3. Times New Roman
在西文中，最常見的字體莫屬Times New Roman 。這個帶襯線字體來源於英國《泰晤士報》。 1929年，字體專家Stanley Morison 批評了《時代》雜誌的字體難讀又難看。雜誌社的人接受了他的批評，並請他設計出了一款新的、適合雜誌閱讀的字體。於是Morison 和雜誌社內部的Victor Lardent 合作設計了這款著名的Times New Roman。
Morison 一開始是建議在Plantin 的基礎上進行改進設計，但為了兼容可讀性以及對於空間的節省，最終做出了字體的重大改動：筆觸之間的對比做了加強，從而營造出一種干脆的感覺。
適用範圍：書籍，期刊，年度報告，小冊子，報紙
字體下載:
https://www.fonts.com/font/monotype/times-new-roman
CSS字體堆棧:
https://www.cssfontstack.com/Times-New-Roman
4. Helvetica
Helvetica是最廣泛使用的無襯線字體之一，由Max Miedinger 和 EduardHoffman 在1957 年創建。這個字體的中性化設計讓它迅速在各種應用中走紅。由於它良好的使用性，Helvetica無處不在，也一直是企業標識的流行選擇。此外，Helvetica被美國政府廣泛使用，美國稅單上採用的就是Helvetica字體。
適用範圍：品牌商標
字體下載:
https://www.fonts.com/font/linotype/helvetica
CSS字體堆棧:
https://www.cssfontstack.com/helvetica
5. Tahoma
Tahoma是一個十分常見的無襯線字體，字體結構和Verdana很相似，其字符間距較小，而且對Unicode字集的支援範圍較大。 Tahoma 和Verdana師出同門，同為名設計師馬修卡特的作品，由微軟在1999 年推出。許多不喜歡Arial字體的人常常會改用Tahoma來代替，除了是因為Tahoma很容易取得之外，也是因為Tahoma沒有一些Arial為人詬病的缺點，例如大寫“I”與小寫“l”難以分辨等。
適用範圍：屏幕對話框、菜單
字體下載:
https://www.fonts.com/font/microsoft-corporation/tahoma
CSS字體堆棧:
https://www.cssfontstack.com/Tahoma
6. Georgia
Georgia是一種襯線字體，為著名字型設計師馬修卡特（Matthew Carter）於1993年為微軟所設計的作品，具有在小字下仍能清晰辨識的特性，可讀性十分優良，是Windows系統的內建字型之一。蘋果電腦的麥金塔系統之後也跟進採用Georgia作為內建字型之一。
適用範圍：電子書，手機，電腦網頁
字體下載:
https://www.fonts.com/font/microsoft-corporation/georgia
CSS字體堆棧:
https://www.cssfontstack.com/Georgia
7. Verdana
Verdana 是 Matthew Carter 為微軟公司設計的一款無襯線字體。跟字體 Frutiger 一樣， Verdana 設計理念是適應那時低分辨率的電腦屏幕。 Verdana字符的寬大和寬度是這些字體在屏幕上易讀性的關鍵。儘管Verdana字體系列的尺寸很小，但它的分辨率更高，字體最受歡迎。
宜家從2010年起拋棄了使用多年的Futura, 轉而投向了Verdana 的懷抱。據宜家的解釋，這種轉變的原因是為了保證字體能適應各種國家的文字（之前的宜家字體不能兼容亞洲文字），從而保證宜家設計風格的一致性。可見Verdana 在國際化適應範圍上是比較廣的。
適用範圍：電子書，手機，電腦網頁
字體下載:
https://www.fonts.com/font/microsoft-corporation/verdana
CSS字體堆棧:
https://www.cssfontstack.com/Verdana
8. Optima
Optima字體是由著名設計師Hermann Zapf設計的清晰精確的字體。 Optima的靈感來自古典羅馬銘文。 Optima字體的曲線和直線的厚度略有不同，容易留下優雅和清晰的印象。因此，Optima常用於傳達經典理想以及當前趨勢。例如，皮膚護理巨頭雅詩蘭黛（EstéeLauder）將其用作官方字體設計。
適用範圍：海報設計、書籍裝幀、畫冊封面、產品包裝設計
字體下載:
https://www.fonts.com/font/linotype/optima
CSS字體堆棧:
https://www.cssfontstack.com/Optima
9. Palatino
Palatino字體系列據說是世界上十大最常用的字體之一。 Palatino設計採用經典的襯線字體，採用強烈，開放的風格，清晰易讀，非常有吸引力。它的受歡迎程度催生了許多模仿者。
適用範圍：報刊雜誌，廣告,電子書，手機app,電腦網頁
字體下載:
https://www.fonts.com/font/linotype/palatino
CSS字體堆棧:
https://www.cssfontstack.com/Palatino
10. Candara
Candara是一種無襯線字體，為字型設計師Gary Munch為微軟所開發，附帶於Windows Vista中發行。 ——Wiki百科
適用範圍：電子郵件，網頁設計，雜誌和非正式的排版設置
字體下載:
https://www.fonts.com/font/microsoft-corporation/candara
CSS字體堆棧:
https://www.cssfontstack.com/Candara
2019年10款免費最新字體
1. MORGANITE
https://www.behance.net/gallery/66748265/Morganite-Free-Typeface-18-Styles
2. THE CIRCUSDISPLAY
< br>
https://pixelbuddha.net/freebie/the-circus-display-font
3. Neon
https://www.awwwards.com/inspiration/5964b86ee138234ac4227ea1
4. Fivo Sans
< br>
https://www.awwwards.com/inspiration/5964b8c1e138234ab81eba44
5. Yellow Peas Free Font
https://www.behance.net/gallery/74315357/YELLOW-PEAS-ULTRA-LIGHT-FREE-GEOMETRIC-SANS-SERIF
6. Shapes Free Font
https://www.behance.net/gallery/74331313/Shapes-Typeface-Free-Font
7. ALOJA
https://wildpicks.design/product/aloja-free-handwritting-font/
8. Kardinal
https://www.awwwards.com/external_element/5954cc41e13823581d02bae2.html
9. Stay Classy Free Font
https://www.dafont.com/stay-classy-sldt.font
10. Strain Free Font
https://www.behance.net/gallery/62566503/Strain-Calligraphic-Typeface
掃描二維碼加群領取
點擊【在看】，記錄奮鬥的你！
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Are%20you%20sure%20you%20want%20to%20miss%20this%20list%20of%20excellent%20web%20fonts%20in%202019.html
支付宝扫一扫 
评论列表（196条）
测试