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

文字的基本属性

体属性含内容很多，我们可以根据 Sketch 或 Figma 文属性栏为例，分进解释。

1. 字体择 Font-family

字体就是字的同格。

在 UI 体应用，体正常显示条件，是你设备加载过应体文件。比如我们在 Windows Font 文件夹添加体，是为了在设计过程可以调用它们。

理，我们想要设计套 B 端界，使用体不仅仅是要你自己电脑装过，需要用户电脑也装过。所以，B 端设计，我们体使用范围是很小，英文常用体如下所示：

针文项目设计，除部分数想进凸显可以选择其它英文体，不然议统使用微软雅黑或者思黑展开设计即可（即使出现英文）。不用太担心这两体用户没有，这样问题，比较标准黑体样异不会太大，网页基础 CSS 样表调用体都会做多手准备，比如下这段代码：

Font-family：PingFang SC, "SF Pro SC", "SF Pro Text", "Helvetica Neue", 
Helvetica, Roboto,'arial', 'microsoft yahei ui', "Microsoft YaHei", SimSun, sans-serif

每一逗一字体，浏览器会根据这排序依次读取本相关的字体文件，显示网页中的文字，如果第一，就换第二，以此类推。如果全部指字体的话，就会根据当系统默认的字体显示。

最后，还有一点就是多计关心的字体商用版权问题，在网页可用的这个字体范围内，不需要考虑任何版权问题，放心使用即可。更复杂的细节就不在这展开了。

2. 字号选择 – Font-size

文字字号就是文字使用的大号数，在网页中，字体大根据 px 位来制定。通常，网页计中的中文字体最字号控制在 12px， 11px 已经会有多文字不能正常显示了。而纯英文或数字文本最字号则在 9px 左右。

表是同类本中使的字号区间：

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

议新手做设计接背下这个表，定义号时候根据文本类型来设，不要把 B 端界设计成平画册设计，会导致体大小常失衡。

3. 选择 Font-weight

是体笔画粗细，在 UI 设计过程，我们体控制，是根据体自带进调。套成熟体会含多个级。

我们开选项菜单时候，里显示是体文件本身携带，如没有含其它，则选项会有个默认值。

所以，在设计过程论英文，使用细体（Light）、常规（Regular）、粗体（Bold）三即可。

4. 色认识 Color

色，自然是文色了。我们色应用会放在下篇色规范里具体说明，在这边先分享些网页色基本常识。

在网页中，字的用只能用纯，避免在 B 端使用渐变字。同时，网页的彩只使用 RGB 模式，并且用 16 进代码来指向具的彩，也就是彩面板中常见的一串符号。

5. 文本样 Font-style、Text-Description

除了这些选项，最后再说个，是文本样内容。在网页设计，除了以上文属性设，CSS 可以为文本添加下效：

文本的排版属性

除了对字本身的样式属性做设置外，我们还需要考虑字置入到画布中的版问题。为了本可更好的实现页面的布、浏览的效果，就要来了解面这些设置。

1. 本区域 Display

首先讲本区域，我们说过任何 B 端设计中的元素，都包含一个矩形的视图。对于一整字来说，它的视图区域即接来要说的本区域。

页本区域设置和软件中的设置是非一致的（手机客户端直观得多），本区域分水平适应、定宽模式、固定尺寸种。

在设计过中，我们要根据该本的类，来决定使哪种本模式。

2. 对齐模式 Text-align

对齐模式，则是字容在本区域中的对齐方向，最规的左中右对齐就多做介绍了。我们要讲讲在页设计中，是供水平对齐项的。如果一个本区域大于字的，那么字就会水平方向中。

水平中的作类似在表格中，有的表本既可只有一行，可有两行，于是使这种对齐模式就可适应同的情况。而该设置在移端设计中是很到的。还有，在页的范畴里，本的对齐是会使两端对齐的。

因为两端强行对齐会导致字间距被奇怪的修改，非影响视觉效果和阅读体验。专的对多行本的处都使自然对齐，右侧统一是正现象。

3. 行高 Line-height

行高，也是一个让所有 UI 计都头疼的问题。行高是文本域内一行文字实际高度的数值，和字号不是同一个属性。

使用行高的主要目的是为了让多行文本的阅读体验能足的需要，因为如果行高没有置，在网页中行文字等于没有间距，无法正常阅读，所以可以通过行高制定成宽或紧凑的式。

在网页置中，最让新困惑的就是行高应该怎定。建议新行高控制在字号的 1.2-2 倍之间，然后根据需要和实际效果做决定即可，没有万能的行高默认数值，一定要做测。

4. 段间距 P padding

最后，在文字布局中软件有提供给一个属性，段间距，即段落之间的域，通过增加留来提升阅读体验。

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

总结

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

下篇再贱～

注作者的微信公众号：「超人的电话亭」