字体设计中,关于字体的高度和各类间距,有一套比较标准的术语和概念,通常用图示的形式来说明字体的纵向度量(metrics)及其相关间距。以下是常见的字体设计相关的各类高度和间距的概念解释:
1. 基线 (Baseline)
- 字符在一行中的"站立"线,所有字母的底部(除一些下延字母如g,p,q,j等)都在该线上。
2. 字体高度相关指标(垂直度量)
名称 | 说明 |
---|---|
Ascent(上升高度) | 从基线向上的高度,通常是大写字母高度或大部分小写字母的最高点之处。 |
Descent(下降高度) | 从基线向下的高度,用于表示下延字母的部分(例如 g, j, p, q)的延伸部分。 |
Leading(行间距) | 行与行之间的最小间隔,等于行距减去字体高度(可视为行间的空白部分)。 |
Height(字体高度) | 字体的总高度,通常等于 Ascent + Descent + 额外的行间距(或Leading) |
Line Spacing(行距) | 两行基线之间的距离,包含字体高度和行间距。 |
3. 字形相关指标(字体内部)
名称 | 说明 |
---|---|
Cap Height (大写字母高度) | 大写字母如 "H" 的高度,从基线到其顶端。 |
X-Height (小写x高度) | 小写字母"x"的高度,代表大多数字母的中间高度,衡量字体的视觉大小。 |
Ascender (升部位) | 字母如"b,d,h,k,l,t"中部分上升过基线的部分高度。 |
Descender (降部位) | 字母如"g,j,p,q,y"中延伸到基线以下的部分高度。 |
字体高度及间距图示
scss
text
┌──────────────────────────── Cap Height
│ ┌────────────────── Ascent
│ │
│ │
───────┼─────┼──────────────────── Baseline (基线)
│ │
│ │
│ └────────── Descent
│
└────────────── Leading (行距D中的附加间距)
举例说明:
- 普通字体的 "Height" 代表字体从最高点到最低点的像素,高度=ascent+descent。
- leading 是控制多行文本时各行之间额外的留白,避免行间文字重叠,保证阅读舒适。
- cap height 和 x-height 影响字体视觉大小和字形特征,可用来调整字体的风格和可读性。
用Qt QFontMetrics 获取字体设计相关的指标
bash
python
metrics.ascent() # 返回上升高度
metrics.descent() # 返回下降高度
metrics.height() # 总高度 = 上升+下降+行间距
metrics.leading() # 返回行间距
metrics.capHeight() # 大写字母高度
metrics.xHeight() # 小写字母x高度
总结
字体的各种间距设计,保证了字形的视觉美感、可读性以及多行排版的舒适度。理解这些参数,可以帮助你根据需求精细控制字体的布局和UI界面设计。
如果需要更直观的图示教程,可以参考字体设计相关的专业书籍或设计网站,很多都会配有详尽的字体结构图解和设计案例。
添加到后续问题
检查来源