字体知识

简介

这里记录一下选择字体的时候学到的知识.

内容

字体类型/字重

常用:

• Regular: 常规 - 默认
• Bold: 粗体
• Light: 轻量/细
• Italic: 斜体

拼接:

• Semi-Bold: 半宽粗体
• Extra-Light: 特别轻量
• Bold-Light: 粗斜体
• ….. 任意拼接

字体风格

字体宽度

• 等宽字体 (monospaced font) : 字符宽度相同的字体
• 比例字体 (proportional font): 字符宽度不尽相同
• 窄字体 (narrow font)
• 紧缩字体 (condensed font)
• 可变字体宽度 (font width variation)

汉字字形

• CL: 旧类型
• SC: 简体中文
• TC: 繁体, 台湾中文
• HC: 香港, 澳门中文
• J: 日文
• K: 韩文

字体衬线 slab

字体选择

产品思维

1. 英文字体文件很小，所以无所谓。但是 cjk 字体文件都很大。推荐用 system-ui 默认字体，否则首屏爆炸
2. tailwindcss 和很多规范都默认使用 system-ui，如果是 app/desktop 可以自带字体，那么速度影响会小一些。可以考虑各平台统一字体

对比选型

• Releases · jonz94/Sarasa-Gothic-Nerd-Fonts
  • 更纱黑体
  • 等宽, 英文变窄
  • nerd 字符
• GitHub - subframe7536/maple-font: Maple Mono: Open source monospace font with round corner, ligatures and Nerd-Font for IDE and terminal, fine-grained customization options. 带连字和控制台图标的圆角等宽字体，中英文宽度完美2:1，细粒度的自定义选项
  • 等宽（mono）, 中文间隔变宽
  • nerd 字符
• Firacode
  • Mozilla 的等宽字体
• Inconsolata
• Noto Sans SC
  • 谷歌的 note 字体
• Ubuntu Mono
  • Ubuntu Mono 和微软雅黑不是中英文 2:1,所以对不齐.
• Source Code Pro
  • adobe 等宽字体
• 使用常用字体
  • 编程/自用
    • 更纱黑体
    • maple-font
  • 产品/文档/视频, 如果不存在, 就让系统自己 fallback
    • Noto Sans SC 优先使用，开发作为兜底选项
      • note sans 系列是所有的语言都支持，适用于全球化
      • NotoSansMonoCJKsc-Regular.otf 中英文等宽，但是感觉发虚
      • 是从思源黑体拆出来的，核心区别是只有中文，小很多。还有 Noto Sans CJk
      • 很多框架依赖 google font api
        • subset 子集，只包含特定字符，文件小
        • cdn 支持
        • variable font ,不要多种字体，一个变量 ttf 文件搞定
        • 框架有优化，例如打包，不全局 css ，字体切换导致的界面抖动
    • 思源黑体，主要是针对 cjk
      • adobe ， google 联合开发，工业级 CJK 字体。但没有 google font api 支持
      • tim 在用
    • 阿里巴巴普惠体。如果不想用上面的，就用这个
  • 趣味
    • kose-font ，一款衍生于「濑户字体」的中文手写字型 excalidraw 使用这个字体

很多英文字体的设计是 0.6 倍中文，而不是 0.5，所以就对不齐。如果英文是 0.5, 那就会对的齐

相关链接

• 更纱黑体这么多版本，要怎么选？ - 知乎
• Programming Fonts - Test Drive 可以对比多个流行的字体, 没有更纱