去年帮公司商城APP设计了一套字库，今天把设计和实际开发中的一些经验分享给大家，看完后你也可以轻松制作一套属于自己的字库。要多酷有多酷！

1、问题提出

如何设计一套自己特有的字库运用到界面或 UI 视觉中，设计师大概需要了解哪些知识？要用到哪些工具？在实际开发中，通过 font 的什么属性来控制和表达？我们从认识字体的基本属性开始。

2、字体的基本属性

通过 W3C 字体模块可知， FONT的基本属性有：字体 'font-family' 属性、字体粗细 'font-weight' 属性、字体宽度 'font-stretch' 属性、字体样式 'font-style' 属性、字体大小 'font-size' 属性、相对大小 'font-size-adjust' 属性、速记属性 'font' 属性、控制合成 'font-synthesis' 属性等，但我认为设计师大概了解 font-family、font-weight、font-style 就够用，今天我们先认识 font-family 属性。

3、字体‘font-family’属性

该属性指定了一个优先序列，其中包含字体家族名称或通用家族名称。与其他 CSS 属性不同，其值的各个组成部分之间以逗号分隔。

一个字体家族名称仅指定一个字符外观集合的名称，字体的可用性在下面给出，Times 可以匹配，但 Times Bold Italic 不能：

家族名称&通用家族

字体家族名称又存在两种类型：家族名称、通用家族。通用字体家族被定义要求存在于所有 CSS 实现中（不必为它们映射五个不同的实际字体）。用户代理应当为通用字体家族提供合理的默认选择，该选择在底层技术允许的范围内尽可能的表现每个家族中字体。我们鼓励用户代理允许用户选择通用字体的替代选择。

衬线（serif）

衬线字体的字形，如其在 CSS 中所使用的术语相同，拥有收笔、向外展开收紧的端点、或者拥有实际的衬线端点（包括粗衬线）。CSS 将术语衬线（serif）应用于所有脚本的字体，即使对于某些脚本其他名称可能更加熟悉，例如：Mincho（明朝体，日语）、Sung、Song或Kai（宋体、楷书，中文）、Batang（巴塘，韩语）。所有如此描述的字体都可能会被用于表示通用衬线（serif）家族。

无衬线（sans-serif）

无衬线字体的字形，如其在 CSS 中所使用的术语相同，其笔划的端点没有格式——没有扩口、交叉笔划、或者其他装饰。CSS将术语‘衬线（serif）’应用于所有脚本的字体，即使对于某些脚本其他名称可能更加熟悉，例如：Gothic（哥特式，日语）、Hei（黑体，中文）或Gulim（韩语）。所有如此描述的字体都可能会被用于表示通用‘无衬线（sans-serif）’家族。

手写体（cursive）

手写体字体的字形拥有连接的笔划或其他远超斜体字体字符的手写体特性。这些字形部分或完全的连接在一起，且产生的结果比印刷的字母更像是手写笔、手写刷。CSS将属于‘手写体（cursive）’应用于所有脚本的字体，即使对于某些脚本其他名称可能更加熟悉，例如： Chancery、Brush、Swing和Script。

幻想（fantasy）

幻想字体主要用于装饰包含幽默地表示字符的字体。它们不包括不表示实际字符的 Pi 或图片字体。

等宽（monospace）

等宽字体的唯一要求是所有字形都拥有相同的固定宽度。它们经常被用于显示计算机代码示例。

大部分情况我们用 serif、sans-serif 的多，很多网站的工程师也都把 serif、sans-serif 通用家族字体作为最后备用字体写在代码里，如下图：

sans-serif 就是通用家族中的无衬线字体，它在操作系统或者浏览器里也是可以设置的，而设置的这种字体肯定是当前系统里存在的字体，所以使用这个字体就肯定能显示出来，所以在 font-family 末尾加上 sans-serif 就能保证调用。

@font-face

@font-face 规则允许到字体的链接，该字体在需要的时候会自动激活。也就是说前端工程师可以使用页面设计的特定字体，而不必被全平台可用字体集所限制。一个字体描述符集定义了一个字体资源的位置（既可以是本地位置也可以是远程位置）以及个体外观的样式特征。多个 @font-face 规则可以用于产生拥有不同外观的字体家族。使用 CSS 字体匹配规则，用户代理可以有选择的下载这些外观中指定的部分文本。@font-face 规则的一般格式是：@font-face { <字体描述> }。

结尾

通过对 font-family 属性知识的了解，大概知道前端代码是如何实现我们想要的字体了。下一期继续分享 font-weight 属性，敬请期待！