一文读懂字符、字形、字体

完整内容也可以在公众号「非专业程序员Ping」查看

一、引言

什么是Character?什么是Glyph?Character和Glyph是否一一对应?我们常说的Font又包含哪些东西?如果要自己实现一套文本的分词、测量和布局,又需要理清楚哪些概念?ascent、descent、lineHeight之间的关系是怎么样的?

本文将尽量以简洁易懂的方式来解释以上问题,也可以提前Mark起来,作为日后的速查手册。

二、Character

Character也叫字符,是一个抽象概念,比如字母A、中文等都可以视为一个字符,它只是一个语义单位,不关心具体长什么样。

三、Glpyh

Glpyh也叫字形,表示字符的绘制方式;一个字符可以有多种方式绘制,比如字母A,可以有不同的大小、粗细、斜体、衬线等,但都是同一个字符;这些不同的绘制方式,都叫字形。

3.1 Character与Glyph的关系

字符与字形并非一一对应关系,一个字符可以由多个字形表示,比如é可以是e和重音符号´的组合,在一些连字情况下,一个字形也可以代表多个字符,如下:

四、Font

4.1 Typeface

指一套具有统一设计风格的Font集合,它是一种设计概念,而不是具体的文件

4.2 Font

Font可以理解成Typeface的某个具体实现。

以Helvetica为例:

  • Typeface:Helvetica
  • Font:
    • Helvetica Regular.ttf
    • Helvetica Bold.ttf
    • Helvetica Italic.ttf
    • Helvetica Bold Italic.ttf

4.3 Font Family

Font Family是一组属于同一个Typeface的字体(Fonts),它们共享设计风格,只是字重/宽度/样式不同。

比如:Helvetica是一个Font Family,里面包含字体:

  • Helvetica Regular
  • Helvetica Bold
  • Helvetica Italic
  • Helvetica Bold Italic

4.4 Font Descriptor

Font Descriptor(字体描述符)是一种属性集合(Font Family、Font Weight、样式 (italic/oblique)、大小等),用来描述或查询一个字体;它不是字体文件,而是一个"过滤条件"或"配置对象",在 CoreText 里对应 CTFontDescriptor

Font Descriptor可以用于匹配系统中符合条件的字体,也可以用它来派生一个具体的CTFont,如:

swift 复制代码
// 这里的 descriptor 只是描述条件,真正的字体对象是 font
let descriptor = CTFontDescriptorCreateWithAttributes([
    kCTFontFamilyNameAttribute: "Microsoft YaHei",
    kCTFontWeightTrait: 0.8
])
let font = CTFontCreateWithFontDescriptor(descriptor, 14, nil)

4.5 Font Collections

Font Collections是一组字体的集合,通常用于检索和筛选,在 CoreText 里对应CTFontCollection。

它可以包含系统中所有可用字体,也可以按条件过滤出子集,主要用途有:

  • 枚举系统安装的字体

  • 根据 Font Descriptor 找到所有匹配的字体

  • 做字体选择器 UI(比如 Word 里的字体下拉框)

4.6 小结

4.7 Glyph与Font的关系

简单理解,Font里存储了Glyph的绘制样式,Glyph与Unicode的映射关系等。

Font里有各种各样的表,存储了Unicode code point与GlyphID的映射关系,每个Glyph绘制时的advance width 和left side bearing等,后续会有单独的文章详细解析Font文件内容,这里先理解二者的概念。

五、文字排版的基本概念

基本概念 解释
metrics 由字体设计师提供,用于描述每个Glyph周围的间距
advance width 前进宽度,基线方向到下一个Glyph origin的距离,或者理解为字形绘制完后,光标应该前进多少距离
left-side bearing Glyph origin与Glyph左侧的间距
right-side bearing Glyph右侧与advance width终点的距离
ascent Glyph origin到Font中最高Glyph的顶部距离
descent Glyph origin到Font中最低Glyph的底部距离
bounding box bounding rectangle 包含Glyph可视区域(注意非advance width)最小rect
kerning 通常,Glyph一般按advance width排列,但为了提高可读性,通常会引入kerning来扩大或缩小两个glyph之间的间距,比如W和A:
leading/linegap line之间的添加的距离
lineHeight lineHeight = ascent + descent + leading

一图胜过千言,贴两张经典的图:

图一 图二

更多精彩内容欢迎关注🌍公众号:非专业程序员Ping

相关推荐
游戏开发爱好者81 小时前
日常开发与测试的 App 测试方法、查看设备状态、实时日志、应用数据
android·ios·小程序·https·uni-app·iphone·webview
黑码哥2 小时前
ViewHolder设计模式深度剖析:iOS开发者掌握Android列表性能优化的实战指南
android·ios·性能优化·跨平台开发·viewholder
2501_915106323 小时前
app 上架过程,安装包准备、证书与描述文件管理、安装测试、上传
android·ios·小程序·https·uni-app·iphone·webview
2501_915106323 小时前
使用 Sniffmaster TCP 抓包和 Wireshark 网络分析
网络协议·tcp/ip·ios·小程序·uni-app·wireshark·iphone
熊猫钓鱼>_>4 小时前
移动端开发技术选型报告:三足鼎立时代的开发者指南(2026年2月)
android·人工智能·ios·app·鸿蒙·cpu·移动端
徐同保1 天前
通过ip访问nginx的服务时,被第一个server重定向了,通过设置default_server解决这个问题
ios·iphone
2501_915918411 天前
在 iOS 环境下查看 App 详细信息与文件目录
android·ios·小程序·https·uni-app·iphone·webview
2501_916007471 天前
没有 Mac 用户如何上架 App Store,IPA生成、证书与描述文件管理、跨平台上传
android·macos·ios·小程序·uni-app·iphone·webview
夏幻灵2 天前
HTTPS全面解析:原理、加密机制与证书体
ios·iphone
TheNextByte12 天前
如何在iPhone上恢复已删除的笔记的综合指南
笔记·ios·iphone