超详细！总监出品的B端设计规范指南（二）：字体

第二篇} . S，我们就要回到 UI 整个类目里最麻烦，也是最重要的规范类型——字体。

文字的基本属性

字体属性包含的内容很多，我们可以根据 Sketch 或 Figma 的文字属性栏为例，O z t Y V 9分别进行解释。

1. 字体选择 Fon# b ut-family

字体就是文字的不同风格。

在 UI 的O I #字 A N A i H k e体应用中，字体正常显示的条件，是你的设备加载过对应的字体文件。比如我们在 Windows Font 文件夹中添加的字体，就是为m ; * / { | k a #了在设计过程可以调用它们。

同理，我们想要设计一套 B 端界面，使用的字体不仅仅是要你自己电脑装过，还需要用户的电脑也装过。所以，B 端的设计中，我们对字体的使用范围是很小% Y ? K U 4的，中英文常用字体如下所示：

针对中文项目的设计，除非对部分数字想进行凸显可以选择其它英文字体，不然建议统一使用微软雅黑或者思源黑展开设计即可（即使中间出现英文）。不用太担心这两字体用户没有，这样的问题，比较标准的黑体样式差异不会太大，网页的基础 CSS 样式表调用字体都会做多手准备，比如下面这段代码：

Font-family：PingFang SC, "SF Pro SC", "SF Pro Texti ! u ; y u  2 V", "Helvetica Neue",
Helvetica, Roboto,'arial', 'microsoft yahei ui', "Microsoftr f 7 D YaHei", SimSun, sans-serif

每一个逗号前是一个字体，浏览器会根据这个排序依次读取你本地相关的字体文件，来显示网页中的文字，如果第一个没有，就换第二个，以此类推。如果全部指定字体没有的话，就会根据你当前系统默认的字体来显示。

最后，还有一点就是很多设计# = s 5 P c s 0 ~师关心的字体商用版权问题，在网页可用的这几个字体范围内，不需要考虑任何版权问题，放心使用即可。更复杂的细节我2 3 5 –就不在这里展开了。

2. 字号选择 – Font-size

文字字号就是文字使用的大小号数，在网页中，字体大小根据 px 单位来制定。通常，网页设计中的中文字体最小字号控制在 12px，到 11px 已经会有很多文字不能正常显示了。而纯英E , A 0文或数字文本c c k J最小字号则在 9px 左右。

下表是不同类型文本中使用的字号区间：

• 注释英文、数字：9-11px
• 注释、小段文本：12-13px
• 正文、小标题：14-16px
• 大标题和大数字：16-20px

建议新手做设计直接背下这个表，定义字号的时候根据文本的类型来设置，不要把 B 端界面设计当成平面画册的设计，会导致字体大小非常失衡。

3. 字重的选择 Font-weight

字重是字体笔画的粗细，在 UI 设计的过程中，我们对字体字重M C $ & a m r的控制，是根据字体自带的字重进行调整的。一套成熟的字体会包含多个级别的字重。

当我们点开字$ T b 0 1重选项菜单的时候，里面显示的字重是字体文件本身携带的h T h T i，如果没C f G +有包含其它字重，则字重选项就只会有一E [ . L z % 2 j个默认的值。

所以，在设计过程中无论中英文，只使用细体（Light）、常规（Regular）、粗体（B% F A told）三种字重即可。

4. 字色的认h | 1 % H识 Color

字色，自然就是文字的色彩了。我们对字色的应用会放在下一篇色彩规范里具体说明，在这& o O 9 @ K t 8 $边先分享一些网页中字色的基本常识。

在网页4 Y #中，字体的用色只能用纯色，避免在! K = U a i ~ * 0 B 端使用渐[ l ( e g O [变性字色。} ( T U ] h Y B U同时，网页的色彩只使用 RGB 模式，并且用 16 进制代码来指向具体的色彩，也就是色彩面板中常见的那一串符号。h c w ] f : *

5. 文本样. ` m式 Font-style、Text-Description

除了这些选项外，最后再说一个，就是文本的样式内容。在网页设计中，除了以上的文! . ` 1 6 ) J字属性设置外; * ) @ e I 1，CSS 还可以为文w / X本添H I * X 0 d H z c加下面的效果：

文本的排版属性

除了对文字本身的样式属性做设置外，我们还需要考e Q R j ~ 2 O虑文字置入到画布中的排版问题。为了让文% G 8 ] P ` ; ` U本可以更好的实现页面的布局、浏览的效果@ ( O n G 6 | B Z，就要来了解下面这些设置。

1. 文本区域 Display

首先讲文本区域，我们0 L u f X说过任何 B 端设计中的元素，都包含一个矩形的视图。对于一整段文字来说，D h F G它的视图区域即接下来要说的文本区域。

网页9 ` r Z文本区域设置和软件中的设置是非常一致的（比手机客户端直观得多），文本区域( g v y j a分水平适应、定宽模式、固定尺寸三种。

在设计过中，我们要根据该段文本的类型，来决定使用哪种文本模式。

2. 对齐模式 Text-align

对齐模式，则是文字内容在文本区域中的对齐方向，最常规的左中右对齐就不多做介绍了。我们要讲讲在网页设计中，是提供水平对齐选项的。如果一个文本区域大于文字的高度，那么文字就会水平方) U + A 6 2 Y Y 7向5 ` ] ! x x居中。

水平居中的作用类似在表格中，有的表内文本既O e E | 9 = ` 3 I可能只有一行，也可能有两行，于是使用v 0 | g n这种对齐模式就可以适应不同的z ~ p情况。而该设置在移动端设计中是很少用到的。还有，在网Q D / i 4页的范畴里，文本的对齐是& B ^ g `不会使用两端对齐的。

因为两端强行对齐F c会导致文字间距被奇怪的修改，非常影响视觉效果和阅读体验。专业的网站对多行文本的处理都使用自然对齐，右侧不统一是正常现象。

3. 行高 Line-height

行高h g 2 6 j，也是一个让所有 UI 设计师都头疼的a & r问X [ d 9题。行高是文本区域内一行文字实际~ h N高度的数值，和字号不是同一个属性。

使用行高的主要目的是为了让多J / } @ I % 行文本的阅读体验能满足我们的需要，因为如果行高没有设/ d v Y P置，在网页中两行文字等于没有间距，无法% w K I T q l ;正常阅读，所以我们可以w w X w X 0 v通过行高制定成宽松或紧凑的样式。

在网页设置中，最让新手困惑的就是行高应该怎么定。建议新手行高控制在字号的m 0 N L V V t m 1.2-2 倍之间，然后根据自己需要和实际效果做决定即可，没有万能的行高默认数值，一定e l ^ h要自己做测试。

4. 段间距 P padding

最后，在文字布局中软件有提供给我们一个属性，段间5 B K H 4距，即段落之间的区域，通过增加留白N f y 8 J S来提升阅读体验。

段间距并不是一个 CSS 默认的属性，在实现它的时候往往要用其它属性代替。尽量避免在 B 端设计中多段文本使用一个文本框，将每段独立成一个文本框的设计，能最大化开{ 2 |发的效率。

总结

文字部分的规范就先介绍到这里，关于色彩应用这个比较麻烦的部分我们就留在下篇进行统一的讲解。有什么问题可以在评论区留言。

下篇再贱～

欢迎关注作者的微信公众号：「超人的电话亭」