字体属性包含了很多内容，我们可以以或者Figma的文本属性栏为例分别进行说明。
1.1 字体选择Font-
字体是不同样式的文本。
在UI字体应用中，字体能够正常显示的条件是您的设备已经加载了对应的字体文件。比如我们在Font文件夹中添加的字体，是为了在设计过程中调用它们。
同样的，我们要设计一个B端的接口。使用的字体不仅需要安装在自己的电脑上中文字体排版设计，还需要安装在用户的电脑上。所以在B端的设计中，我们对字体使用的字体范围很小，常用的中英文字体如下：
对于中文项目的设计，除非你想突出一些数字，选择其他英文字体，否则建议使用微软雅黑或四元黑进行设计（即使英文出现在中间）。
不用太担心这两个字体用户。不存在这样的问题。标准粗体风格的区别不是太大。网页的基本CSS样式表会用多个手来调用字体。例如，下面的代码：
字体-: SC, "SF Pro SC", "SF Pro Text", "Neue", , , 'arial', 'yahei ui', "YaHei", , sans-serif
每个逗号前都有一个字体，浏览器会按照这个顺序依次读取你本地的相关字体文件来显示网页中的文字。如果第一个不可用，则更改为第二个，依此类推。如果缺少所有指定的字体，将按照您当前系统的默认字体显示。
最后还有一点，很多设计师都关心字体的商业版权问题。这些字体在网络上可用的范围内，无需考虑任何版权问题，您可以放心使用。我不会在这里讨论更复杂的细节。
1.2 字号选择——Font-size
文字的字号就是文字使用的字号和字号。在网页中，字体大小是根据px单位来确定的。
通常网页设计中的中文字体最小字号控制在12px，达到11px时很多字符就不能正常显示了。纯英文或数字文本的最小字体大小约为 9px。
下表显示了不同类型文本中使用的字体大小范围：
英文和数字注释：9-11px
注释，小文本：12-13px
正文、副标题：14-16px
大标题和数字：16-20px
建议新手在设计的时候直接背这个表，在定义字号的时候根据文字的类型来设置。不要把B端的界面设计当成图文相册的设计，这样会导致字体大小很不平衡。
1.3 字体粗细的选择Font-
字体粗细是字体笔划的粗细。在UI设计的过程中，我们对字重的控制是根据字体自带的字重来调整的。成熟的字体将包含多个级别的权重。
当我们点击粗细选项菜单时，其中显示的粗细是由字体文件本身携带的。如果不包含其他权重，则权重选项将只有一个默认值。
因此，在设计过程中，无论中文还是英文，都只使用三种字体粗细：Light（轻）、（）、Bold（粗体）。
1.4 理解颜色
字符的颜色自然是字符的颜色。我们对字体颜色的应用会在下一个颜色规范中详细说明。下面我们将分享一些网页字体颜色的基础知识。
在网页中，字体颜色只能使用纯色，B面应避免渐变字体颜色。同时，网页的颜色只使用RGB模式，使用十六进制编码指向具体的颜色，也就是颜色面板中常见的一串符号。
1.5 文字样式 Font-style, Text-
除了这些选项之外，最后一个是文本的样式内容。在网页设计中，除了上述文字属性设置外，CSS还可以为文字添加以下效果：
除了设置文本本身的样式属性外，我们还需要考虑放置在画布上的文本的布局。为了让正文更好的实现页面的布局和浏览效果，需要了解以下设置。
2.1 文本区
先来说说文字区域。我们说过，B端设计中的任何元素都包含一个矩形视图。对于一整段文字来说，它的视图区域就是接下来要说的文字区域。
网页上的文本区域设置与软件中的设置非常一致（比手机客户端直观很多），文本区域分为横向适配、固定支付方式、固定大小三种。
在设计过程中，我们需要根据文本的类型来决定使用哪种文本模式。
2.2 对齐方式Text-align
对齐方式是文本区域中文本内容的对齐方向。最常见的左中右对齐不再介绍。
我们将要讨论的是在网页设计中，有一个水平对齐的选项。如果文本区域大于文本的高度，文本将水平居中。
水平居中的作用类似于表格。表格中的某些文本可能只有一行或两行，因此使用这种对齐方式可以适应不同的情况。不过这个设置在移动端设计中很少用到。
此外，在网页类别中，文本对齐不使用对齐。
因为两端强制对齐，会导致文字间距被奇怪的修改，极大的影响视觉效果和阅读体验。专业网站多行文字处理采用自然对齐方式，右边不统一是正常的。
2.3 行高Line-
行高也是所有UI设计师头疼的问题。行高是文本区域内一行文本的实际高度值，与字号不是同一个属性。
使用行高的主要目的是为了让多行文字的阅读体验满足我们的需求，因为如果不设置行高，网页中两行文字之间就没有空格了，不能正常阅读，所以我们可以通过行高来设置它 松散或紧凑的样式。
在网页设置中，新手最困惑的就是如何设置行高。建议初学者将行高控制在字号的1.2-2倍之间，再根据自己的需要和实际效果来决定。没有通用的默认行高值，因此您必须自己进行测试。
2.4 段间距P
最后，在文字排版中，软件为我们提供了一个属性，段落间距，即段落之间的面积，通过增加留白来提升阅读体验。
段落间距不是CSS的默认属性中文字体排版设计，在实现时往往会被其他属性代替。B端设计中尽量避免多段文字使用一个文本框，将每一段文字独立设计成一个文本框，最大限度提高开发效率。
文字部分的规范先介绍到这里，比较麻烦的颜色应用部分留到下篇统一讲解。
