设计神器Google Fonts!超1000款可商用开源字体免费下载

时间:18小时前
类别:字体下载
2021年最值得学的涨薪技能!突破设计瓶颈的优质小课,哪项薄弱学哪里 → 立即点击

设计神器Google Fonts!超1000款可商用开源字体免费下载

如果把设计师⽐喻成紫薇,那字体⼀定是容嬷嬷,⽽对于个⼈设计师或者⼩团队来说,字体产品⾼昂的商⽤价格,就是容嬷嬷⼿⾥那根针,每每要使⽤⼼仪的字体的时候,都可能体会到“你看 我扎不扎你就完了”的恐惧。

⽽对⼀些刚⼊⾏的 Web ⼩⽩来说,对于字体,在字号、字重⽅⾯可能会存在认知感受的问题, ⽐如 12px 的字号在浏览器上是什么效果、Bold 字重在实际效果中会不会太粗。有部分懂代码的设计师可能就直接看代码了。那不会⼜不了解还不想问同事的社恐⼩⽩怎么办。

哎~今天就有办法啦~下⾯要介绍的神器⼀定可以扮演好尔康和社恐解决者的⻆⾊~

神器介绍

神器叫 Google Fonts,是 Google 公司制作的字体开源平台。⽬前已收录 1291 款⾼质量免费开源字体。允许任何⼈在任何时候任何项⽬中下载、使⽤这些漂亮美观的字体。并且这些字体对市⾯上常⻅的浏览器都兼容,不需要引⼊ JavaScript,⼤⼤节省开发成本,简单易⽤。

设计神器Google Fonts!超1000款可商用开源字体免费下载

网站架构

书接上⽂,光说不练假把式,⼤家知道它其实是个字库以后,我就要开始 Say⼀Say 这个字库该怎么⽤了。⽹站⼤体可分为三⼤版块:Browse fonts(浏览字体)、Icons(图标)、More(更 多)。两⼤控件:Switch to the dark theme(切换为暗夜模式)、View your selected familes(查看已选择的字族)。

设计神器Google Fonts!超1000款可商用开源字体免费下载

三大版块

01.Browse fonts(浏览字体)

进⼊⽹站,⾸屏会直接显示「 Browse fonts 」类⽬,也就是神器最主要的功能及内容—字体的相关内容。

设计神器Google Fonts!超1000款可商用开源字体免费下载

按模块可划分为:筛选⾯板和结果展示⾯板。在筛选⾯板中,我们可以进⾏ Search fonts(搜索 字体),键⼊关键字即可,字体⼤多数都是英⽂,所以需要使⽤英⽂搜索。

设计神器Google Fonts!超1000款可商用开源字体免费下载

在搜索框后⾯的这个「 Sentence–Type something 」是设置预览⽂本内容的区域,点击 「 Sentence 」会下拉下来⼀些默认的⽂本类⽬,分别有:Custom(谚语)、Sentence(句 ⼦)、Alphabet(字⺟)、Paragraph(段落)、Numerals(数字)。另外,预览⽂本类型, 在选择后,后⾯的字号会随类型变化⽽变化,变化后的字号就是该类型⽂本在浏览器端的标准字号,所以这两部分最好搭配使⽤。⼤致效果如下图:

设计神器Google Fonts!超1000款可商用开源字体免费下载

筛选⾯板⾥还有三类快捷筛选字体的下拉框,分别为:Categories(类别)、Language(语 ⾔)、Font properties(字体属性)。另外还有⼀个开关:Show only variable fonts(仅展示可变字体)。

设计神器Google Fonts!超1000款可商用开源字体免费下载

Categories(类别)是选择衬线、⾮衬线这种字类的;Language(语⾔)是选择字体所涉及的 语⾔,⽐如中⽂、英⽂、阿拉伯⽂,但还是英⽂字体居多;Font properties(字体属性)是选择字重的,包含细体、粗体、斜体等等。

筛选⾯板下⾯就是结果展示⾯板了,⾸次进⼊⽹站会默认展示所有字体,并且按照 Trending (趋势)排序,也就是说越热⻔的在最前⾯。可以通过右侧的按钮触发下拉框选择排序⽅式,以及展示⽅式,有列表展示和九宫格显示两种。根据⾃⼰需要去操作吧~操作效果如下图:

设计神器Google Fonts!超1000款可商用开源字体免费下载

02.Icons(图标)

Icons 版块的功能⼗分简洁,由搜索、类型选择、Icon ⻛格,Icon 筛选结果展示⼏个模块构成。 中间标红的区域⼤家可以不⽤管,都是⼀些许可、GitHub ⽅⾯代码的东⻄,程序⼯程师朋友们可以看⼀下,设计同学就不⽤管了哈。

设计神器Google Fonts!超1000款可商用开源字体免费下载

Icon 下载⽅式也⼗分简单快速,选择你喜欢的⼀款 Icon,点击它,右侧就会滑出这个 Icon的各种详情,跟在蓝湖⾥点选某⼀个图标是差不多的概念。之后想要 SVG 的话就点左下「下载 SVG 」,想要 PNG 话就点右下「下载 PNG 」即可。

设计神器Google Fonts!超1000款可商用开源字体免费下载

03.More(更多)

More下⾯的内容都是⼀些探索内容,供有兴趣的朋友通过 Google fonts 去了解更多有关的新奇 的产品,这⾥就不过多赘述了。

设计神器Google Fonts!超1000款可商用开源字体免费下载

两大控件

在顶部导航最右边,始终会存在两个按钮。⿏标悬停时分别会显示:Switch to the dark theme (切换为暗夜模式)、View your selected familes(查看已选择的字族)。

设计神器Google Fonts!超1000款可商用开源字体免费下载

Switch to the dark theme(切换为暗夜模式)就是那个意思,跟⼿机上的效果⼀样,为了护眼。

设计神器Google Fonts!超1000款可商用开源字体免费下载

View your selected familes(查看已选择的字族),相当于购物⻋,把我们相中的想要下载的字体都放在这⾥统⼀下载。在字族⾥,每个字重的字体都会有「Select this style」的⽂字按钮:

设计神器Google Fonts!超1000款可商用开源字体免费下载

点它后它不会打你,反⽽会乖乖的进⼊到上⾯说过的「 View your selected familes(查看已选择的字族)」⾥,就像这样:

设计神器Google Fonts!超1000款可商用开源字体免费下载

可以同时添加多个字体进去,并且可以⼀同下载下来,通过右下⻆「 Download All 」按钮来触 发下载,解压后就能得到所有已选字体的⽂件了。这个版块在我看来是利于开发⼈员快速应⽤字体的作⽤,设计师朋友们可以直接通过下⾯要介绍的下载⽅法去下载。

字体下载

那么多字体怎么下载下来呢?⾸先第⼀步,我们得找到⼀个想要下载的字体。就⽤ Roboto 举例吧,我们先搜索出这个字体,然后模糊搜索出以下四种字族:

设计神器Google Fonts!超1000款可商用开源字体免费下载

⽽我们需要的是第⼀个字族「 Roboto 」,点击它进⼊详情⻚:

设计神器Google Fonts!超1000款可商用开源字体免费下载

看到右上⽅的「 Download Family 」了吗,点它就⾃动启动下载了,下载后我们会得到⼀个安装包,解压后就可以得到该字族的字体了:

设计神器Google Fonts!超1000款可商用开源字体免费下载

结语

⼯欲善其事必先利其器,何况是神器。在设计中⽂字是不可或缺极其重要的元素,优质的免费可商⽤字体库可遇不可求,⽽字号也是 Web 设计中⼗分灵魂的标准。⽽且做为在线⽹站,Google Fonts 不会占⽤你电脑⼀丝⼀毫的内存,有⽊有啊有⽊有~所以赶快去试试吧!它不会让你失望的~

网站直达地址:Google Fonts

本⽂编辑:CCOA

看过这篇文章的朋友也看过…

收藏

非特殊说明,本站 gwxwl.com 上的教程均由本站作者及学员原创或翻译,原作品版权归属原作者,转载请联系 @跟我学习网 授权。

转载时请在文首注明,来源 gwxwl.com 及教程作者,并附本文链接。谢谢各位编辑同仁配合。跟我学习 保留追究相应责任的权利。

复制本文链接

发表评论 快来秀出你的观点

还可以输入 800 个字
 
 

跟我学习网 365 天打卡计划

点击 #跟我学习每日作业# 进入微博超话页面,上传并发布你的练习作业,话题微博格式【 跟我学习网365打卡计划 – DAY 01 】,优秀作业将有机会被 @跟我学习网 官方微博转发点评。

/

支持键盘 ← → 键翻阅图片