B端设计那些事儿 - 字体篇

二：字体篇

1：字体选择

      说到字体，最重要的一点是字体的选择；为什么字体的选择在B端场景中是较为重要的呢？因为我们想要设计一套 B 端界面，使用的字体不仅仅是要你自己电脑装过，还需要用户的电脑也装过。所以，B 端的设计中，我们对字体的使用范围是很小的，中英文常用字体如下所示：

 

针对中文项目的设计，除非对部分数字想进行凸显可以选择其它英文字体（比如DIN字体，当然也要考虑版权的问题），不然建议统一使用微软雅黑或者思源黑展开设计即可（即使中间出现英文）。这样的话就不用担心用户电脑中没有我们所涉及的字体，并且前端在写 CSS 样式表调用字体时通常都会做多手准备，比如下面这段代码：

Font-family：PingFang SC, "SF Pro SC", "SF Pro Text", "Helvetica Neue", 

Helvetica, Roboto,'arial', 'microsoft yahei ui', "Microsoft YaHei”，

以上代码中每一个逗号前均为一个字体，用户在使用系统时浏览器会根据每个字体进行读取本地字体文件，来显示网页中的文字；如果第一个没，则换第二个，以此类推；如果全部制定的字体都没有，则会根据当前系统默认的字体来显示。

2.字号选择

     字面意思，字号选择即为系统中文字展示的大小；在网页端设计时，设计师通常以px单位进行设计；常规中文文字大小最小均控制在12号，最大为20号；英文则可以比中文字体

字号选择上小一点，比如：纯英文及数字可以酌情最小在9号字（一般情况下我做设计英文与中文都是保持一致的规则，这个都是看情况而定）

具体类型及字号使用区间基本按以下规则是不会出现太大问题的：

• 正文、小标题：14px - 16px 之间

• 大标题、大数字：16px - 20px 之间

• 注释、小段文本：12px - 13px 之间

（最好在字号设计选择适已偶数设计为最佳，具体还是要按照场景与不同系统风格视情况而定）

3.字重选择

字重为字体的笔画粗细；一般字重都是以等级来进行标明该字体的不同粗细从而进行调整； 

当我们点开字重选项时，会出现字体本身所携带的不同等级字重的选择；若只有一种字重，则改字体只有一种标准字重。

所以在设计时，最好选用有三种以上的字体；目的是设计时选择同一字体可以保证视觉的一致性等；一般使用较多为：细体、常规体、粗体。

4.字体文本样式

在网页设计中，除了以上的文字属性设置外，CSS 还可以为文本添加不同的效果：

1：文本的排版属性

除了对文字本身的样式属性做设置外，我们还需要考虑文字置入到画布中的排版问题。为了让文本可以更好的实现页面的布局、浏览的效果，就要来了解下面这些设置。主要分为：文本区域设置、对齐模式设置、行高设置、段间距设置：我们先从文本区域开始说起：观下图  

网页文本区域设置和软件中的设置是非常一致的（比手机客户端直观得多），文本区域分水平适应、定宽模式、固定尺寸三种。在设计过程中，我们要根据该段文本的类型，来决定使用哪种文本模式。比如下图：

2：对齐模式

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

看到这里是不是对水平对齐与水平居中对齐混淆了？说实话他俩还真是不一样；出现的场也是不同的。通常水平对齐较多出现在文章中其实也就是文章中的左右对齐；水平居中对齐 是在单元格中间显示；也就是我们B端中的列表内字段的对齐方式；有的表内文本既可能只有一行，也可能有两行，于是使用这种对齐模式就可以适应不同的情况；说到这里想到了文本的对齐方式，有很多情况下大家都会使用两端对齐进行设计：有时却忽视了这样强制对齐会导致文字间距被奇怪的修改，非常影响视觉效果和阅读体验。专业的网站对多行文本的处理都使用自然对齐，右侧不统一是正常现象。

3：行高

在不同场景下字体行高需要进行酌情调整，以至于在按钮或者矩形中保持对齐。行高是文本区域内一行文字实际高度的数值，和字号不是同一个属性。

使用行高的主要目的是为了让多行文本的阅读体验能满足我们的需要，因为如果行高没有设置，在网页中两行文字等于没有间距，无法正常阅读，所以我们可以通过行高制定成宽松或紧凑的样式，提升整体的阅读体验。

在网页设计中，行高一般可以设定在字号的1.2倍-2倍范围之间，具体的情况根据不同场景实际效果做决定即可，没有万能的行高默认数值，例如在按钮中按钮的高度为32而计算下来改文字行高的高度为27，那么在按钮中的上下对齐就会出现问题；所以此时可以酌情进行调整文字行高直至对齐。

eng，字体呢就先到这里呢 ~ 起到能够帮助到你