前端最佳实践：字体
字体单位
px 依旧是最全面的选择，尤其是重交互的网站：
- 能够做到设计稿的像素级还原。
- 用户体验统一，变量少，可控。
- 方便配合 JS 动态计算布局，JS 接口通常只能获取像素为单位的尺寸和位置。
- icon，图片和 border 通常都是使用像素尺寸，字体采用像素单位更容易配合。
rem 在文字内容型网站上更加灵活，适合新闻，博客等：
- 自适应不同设备，不同用户偏好，获得最佳阅读体验。
- 无需手写繁复的 media query。
有些创意内容网站使用 vw 尺寸系统，字体和图片总是同窗口比例缩放，以实现类似海报布局的整体感，但也仅限于这一类型的网站。
em 和 % 会用在局部使用，但存在嵌套后尺寸不容易控制的问题，极少在项目中大范围使用。
pt 是印刷常用单位，不适合现如今的 Web 环境，且和 px 对应关系复杂，应该避免。
正文字体大小
12px 是 Chrome 浏览器默认支持显示的最小字体。即使 CSS 设置了 9px，最终用户看到的仍然是 12px 字体。因此在设计中使用小于 12px 的字体是一个严重的错误。12px 的英文字体可读性尚可，但是中文可读性比较差。建议作为次要文本字体的尺寸。
13px 是信息密度较高，中文可读性尚可的选择。比如 Facebook 和百度用的就是 13px。
14px 是信息密度和中文可读性的一个比较好的平衡点，适合界面复杂且空间比较紧张的网站的正文字体大小。比如
16px 是大部分浏览器的默认字体大小，可读性好，但是信息密度不高，适合一般网站。
18px 以上通常只有在创意营销网站上才会作为正文字体大小使用。
一个比较通用的策略是：
- 12px：次要文字，页脚链接，标签分类，面包屑，输入框提示，小按钮，小输入框
- 14px：普通文字，正文，输入框，按钮
- 16px：突出文字，卡片标题，大按钮，搜索栏
标题层级字体大小
HTML 支持 H1 到 H6 共六级标题。但实际应用中，我们应当控制标题的层级数量，层级越多，使用体验会越差。
功能为主的网站对标题依赖比较小，更多是靠 Card 和 Tab 等容器进行界面层级管理。
内容型网站对标题层级的需求会更高一些，但也尽量不超过三级。
H1 字体大小取决于网站类型对信息密度的要求。以功能为主的系统通常 H1 会比较小，不会超过 40px。
H1, H2, H3 之间应当有 30% 左右的递减，视觉上差异才够显著。比如：
- H1, 36px：页面标题
- H2, 24px：章节标题
- H3, 16px：子章节标题，卡片标题，弹窗标题
字重
最早字体只支持两种字重，正常（normal, 400）和粗体（bold, 700）。现代 Web 字体的字重支持 100 到 900 等 9 种字重，100 最细，900 最粗。但是系统字体支持的字重数量通常较少。
Windows 默认中文字体“雅黑”支持 300, 400 和 700 三种字重。macOS 和 iOS 默认中文字体“苹方”支持 100/200/300/400/500/600 六种字重（苹果更喜欢使用较细的字体设计）。也就是说“苹方”的粗体，会比“雅黑”要细一些。Android 系统默认字体 Noto Sans CJK 支持 200/300/400/500/700/900 六种字重，最为全面。部分 Android 系统，比如魅族 Flyme 和小米 MIUI，甚至搞出了字重的无极调节。
由于中文字体体量巨大，通常网站不会加载远端中文字体，而是使用系统字体。因此，在使用字重的时候，就需要考虑系统字体的字重支持。综合主流操作系统，得出兼容性最好的字重集合：细体 300，正常 400，粗体 700/600。
