网页和设计稿里，字体常被随手选定，但读者最先感受到的就是它。系统自带字体在不同设备上的显示差别不小，中文尤其明显。阿里云字体省去了不少挑选和授权上的麻烦：字形有专门设计，授权条款相对清楚，还能通过网络直接加载到页面里。这篇文章按选型、授权和部署三件事来讲，并结合几个常见场景说明具体怎么用。
一、先看清阿里云字体包含哪些类型
阿里云字体是一组按用途分开的中文字体家族。选之前先想清楚这段文字要做什么，再对应到合适的字体：
- 正文类：笔画平稳，适合大段阅读。阿里巴巴普惠体系列属于这一类，文章和详情页正文可以先从它试起。
- 标题类：字重较粗，视觉冲击强，适合页面大标题、海报和封面。阿里妈妈数黑体常用于这类场合。字太粗时放进小字号，笔画容易糊在一起，所以标题用它，正文别用它。
- 数字与英文类：数字字形规整，适合数据看板、价格展示和报表。
多数团队的做法是正文用一款、标题用另一款，整体比全页只用一款更有层次，也不会显得乱。字体种类也不宜太多。每多一种字体，就多一份授权要核对，多一份文件要加载。
选型前可以做的三个小测试
- 用真实文案试排：把页面里最长的一段正文放进候选字体，看行数和换行是否顺眼。假文字看不出问题，真实的长句才会暴露断行的毛病。
- 放到实际字号里对比：设计稿里常见的 14px 和 16px 正文，和标题放在一起看。偏粗的标题字体在小字号下效果往往不理想，最好分开比较。
- 检查数字：价格、日期、百分比都用候选字体排一遍，看位数是否对齐，逗号和小数点是否清楚。
二、案例一：电商详情页的正文统一
一家家居品牌的电商团队遇到过这样的问题：同一个详情页在安卓和 iOS 上，中文字重看起来不一样，文案排版经常要返工。团队最后把正文统一切换为阿里巴巴普惠体，并在页面样式里固定字重和行高。
改完后，设计稿和线上页面的文字宽度基本对得上，客服收到的“字看不清”咨询也明显少了。这个案例里，正文字体的价值在于稳定，而不是醒目。页面文字多的时候，先把一致性解决掉，比追求字形个性更实际。
三、案例二：资讯类站点的标题层级
一个垂直领域的资讯站点，文章标题和正文长期用同一种字体。标题层级不清，读者扫读时找不到重点。编辑团队把标题换成阿里妈妈数黑体，正文保持不变，并拉大 h2 和 h3 的字号差。
调整后，首页的阅读路径清楚多了。编辑也不用再靠加粗和变色去区分层级。标题字体的主要任务是让读者一眼判断“这一段讲什么”，所以选的时候优先看辨识度，装饰感放在其次。
四、案例三：企业官网的网页字体加载
一家制造业企业想统一官网的品牌字体，但把整套中文字体文件全量引入后，首屏加载明显变慢。技术团队改用字体子集化：先统计官网实际用到的字符，只生成这些字符的字体文件，再配合浏览器缓存策略。
优化后，字体文件体积大幅下降，首屏渲染时间也缩短了。做子集前要先把页面字符范围统计准。如果页面内容经常更新，就需要把子集生成放进构建流程里。否则新增的文字可能找不到对应字形，和其他文字的显示对不上。
五、上线前的四项检查
- 授权范围：商用、印刷、嵌入产品等场景的条款可能不一样。上线前去官方页面看最新条款，并把授权说明留存在项目文档里，方便以后核对。
- 引入方式：网页通常有两种做法。直接引用 CDN 部署最快，改动少；下载字体文件自行托管，缓存和访问速度由自己控制，但维护也归自己。团队人手少、页面不复杂的话，先用 CDN 更省事。
- 回退字体：在 CSS 的 font-family 里写明备用字体。网络异常或字体加载失败时，页面仍能正常显示，只是字形换成备用的那一种。
- 实际测试：在主流浏览器和手机上各看一遍，重点检查行高、换行位置和数字对齐。桌面端正常，移动端也要单独看一遍。
六、从哪里开始
如果还没用过阿里云字体，可以先从正文统一入手：选一款正文字体，固定字重和行高，再检查一两个核心页面。标题层级和加载性能可以放到第二步处理。每一步都先确认授权，再调样式，返工的次数会少很多。
