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

admin

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

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

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

神器介绍

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

网站架构

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

三大版块

01.Browse fonts（浏览字体）

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

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

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

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

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

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

02.Icons（图标）

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

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

03.More（更多）

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

两大控件

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

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

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

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

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

字体下载

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

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

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

结语

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

网站直达地址：Google Fonts

https://fonts.google.com/