点击上方[网页设计自学平台]→右上角[...]→[设为星标★]
转自 摹客
就设计元素而言，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
https://pixelbuddha.net/freebie/the-circus-display-font
3. Neon
https://www.awwwards.com/inspiration/5964b86ee138234ac4227ea1
4. Fivo Sans
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/articles/detail/Are%20you%20sure%20you%20want%20to%20miss%20this%20list%20of%20excellent%20web%20fonts%20in%202019.html
支付宝扫一扫 
评论列表（196条）
测试