Typography
1. 字体分类与基本术语 (Font Classifications & Basics)
Typography (文字排版)
文本的字体选择、间距调整、版面布局以及最终在屏幕或纸张上的阅读呈现方式。
TYPOGRAPHY H1 32px ══════════════════════ Typography is the craft of arranging text to Body 1.5em make it readable. ────────────────── Settings Regular 80% Sans-Serif
Font (字体)
特定样式、粗细和尺寸的字形集合。在数字开发中，通常指包含这些字形数据的二进制文件（如 .ttf、.otf）。
Serif (衬线体)
笔画末端带有装饰性“尖角”或“细脚”的字体。视觉风格传统、严谨、具有信赖感，常用于长文阅读或强调经典质感的场景。
Sans-Serif (无衬线体)
笔画末端平滑、无额外装饰的字体。笔画粗细相对均匀，视觉风格现代、简洁、清晰，是数字设备和网页界面的主流选择。
SERIF (衬线体风格) "Classic & Elegant" ═══════════════════════════════════════════════════════════════════ 𝕿 𝖍 𝖊 𝕼 𝖚 𝖎 𝖈 𝖐 𝕭 𝖗 𝖔 𝖜 𝖓 𝕱 𝖔 𝖝 (Fraktur/哥特式衬线) 𝑻 𝒉 𝒆 𝑸 𝒖 𝒊 𝒄 𝒌 𝑩 𝒓 𝒐 𝒘 𝒏 𝑭 𝒐 𝒙 (数学粗斜体衬线) 𝐓 𝐡 𝐞 𝐐 𝐮 𝐢 𝐜 𝐤 𝐁 𝐫 𝐨 𝐰 𝐧 𝐅 𝐨 𝐱 (数学粗体衬线) ─────────────────────────────────────────────────────────────────── 特点： 末端带"脚" 粗细变化 SANS-SERIF (无衬线风格) "Modern & Clean" ═══════════════════════════════════════════════════════════════════ 𝖳 𝖧 𝖤 𝖰 𝖴 𝖨 𝖢 𝖪 𝖡 𝖱 𝖮 𝖶 𝖭 𝖥 𝖮 𝖷 (无衬线常规) 𝗧 𝗵 𝗲 𝗤 𝘂 𝗶 𝗰 𝗸 𝗕 𝗿 𝗼 𝘄 𝗻 𝗙 𝗼 𝘅 (无衬线粗体) 𝘛 𝘩 𝘦 𝘘 𝘶 𝘪 𝘤 𝘬 𝘉 𝘳 𝘰 𝘸 𝘯 𝘍 𝘰 𝘹 (无衬线斜体) ─────────────────────────────────────────────────────────────────── 特点： 笔画圆滑 粗细均匀
Proportional Font (比例字体)
每个字符根据自身形状（如 W 与 i）占用不同水平宽度的字体。整体排版更为紧凑、自然，最符合日常文章和网页的阅读节奏。
Monospace (等宽字体)
每个字符（无论宽窄）都占用相同水平宽度的字体。常用于代码编辑器和终端，能够保证多行文本在垂直方向上完美对齐。
PROPORTIONAL FONT (比例字体) "Natural Text Flow" ═══════════════════════════════════════════════════════════════════ 每个字符的“包装盒”根据自身宽度缩放，排版紧凑。 ╭─╮╭─╮╭──╮╭───╮╭──╮ │i││l││o ││ v ││e │ "ilove" 占用的物理总宽度非常窄 ╰─╯╰─╯╰──╯╰───╯╰──╯ 3px3px 5px 7px 5px 宽度分配是弹性的 (Dynamic) ─────────────────────────────────────────────────────────────────── MONOSPACE FONT (等宽字体) "Code / Grid-aligned" ═══════════════════════════════════════════════════════════════════ 每个字符不论胖瘦，强行塞进大小完全一致的盒子。 ╭───╮╭───╮╭───╮╭───╮╭───╮ │ i ││ l ││ o ││ v ││ e │ "ilove" 占用的物理总宽度较宽 ╰───╯╰───╯╰───╯╰───╯╰───╯ 6px 6px 6px 6px 6px 宽度分配是硬性一致的 (Fixed)
2. 文本布局与间距 (Layout & Spacing)
Tracking (字间距)
均匀应用在整段文本或单词中所有字符之间的水平间距，在 CSS 中通过 letter-spacing 属性进行控制。
1. 默认(Tracking = 0) ╭───╮╭───╮ │ A ││ B │ ╰───╯╰───╯ 2. 增加(Tracking = +1px) ╭───╮▒╭───╮ │ A │█│ B │ 字符间距拉大，视觉更轻盈 ╰───╯▒╰───╯ ╰───> +1px Spacer 3. 减少(Tracking = -1px) ╭───╭───╮ │ A │ B │ 字符紧贴，视觉更稳重、紧凑 ╰───╰───╯ ╰───> -1px Overlap (重叠区)
Kerning (字距微调)
调整特定两个字母（如 A 和 V）之间的间距，消除因字母形状产生的视觉空隙，使单词整体看起来更连贯。
未启用 Kerning (出现视觉空洞) ╭───╮╭───╮ │ A ││ V │ 字母各自守在自己的矩形框内，不能越界 ╰───╯╰───╯ 中间产生了一个巨大的灰色“空洞” 这会导致单词“裂开”，降低阅读连贯性 已启用 Kerning (完美的几何咬合) ╭────╮ │ AV │ 边界重叠，两个字母在视觉上完美契合 ╰────╯ 字符边界产生重叠 通过算法将 V 向左微调
Leading (行间距)
文本行之间的垂直距离，在 CSS 中通常通过 line-height 属性进行控制。
─────── Ascent (升部线) Line 1 h e l l o ─┬───── Baseline (基线) │ │LEADING (基线到基线的垂直跨度) │ ─│───── Ascent (升部线) Line 2 │ w o r l d ─┴───── Baseline (基线)
Alignment (对齐方式)
文本或界面元素沿特定基准线水平排列的规则。包含左对齐、右对齐、居中和两端对齐，用于决定阅读视线的起点和文本边缘的呈现形态。
┋左对齐的特点： ┋ ┋ 右对齐的特点：┋ ┋1. 文字左侧非常平整 ┋ ┋ 1. 文字右侧非常平整┋ ┋2. 右侧呈现参差不齐的“锯齿状”┋ ┋2. 左侧呈现参差不齐的视觉效果┋ ┋3. 最符合人类阅读习惯 ┋ ┋ 3. 常用于数字列或特殊设计┋ ┋ (也称为 Ragged Right) ┋ ┋ ┋ ┋ 居中对齐的特点： ┋ ┋两 端 对 齐 的 特 点 ：┋ ┋ ┋ ┋ ┋1. 左 右 两 侧 边 线┋ ┋ 1. 文字在水平方向居中 ┋ ┋都 非 常 平 整┋ ┋ 2. 左右两侧同时呈现参差不齐 ┋ ┋2.系统 通过 自动 拉伸 间距┋ ┋ 3. 视觉重心在正中央的轴线上 ┋ ┋来 撑满 整行 文本┋ ┋ ┋ ┋ ┋3. 视觉效果呈现为干净块状网格┋ ┋ ┋ ┋ ┋4. 常见于 正式 学术 论文 ┋
3. 字形解剖学 (Type Anatomy)
Baseline (基线)
大多数英文字母排列所在的水平基准线，是文本在垂直方向上对齐的基准。
X-height (x字高)
小写字母（如 x、a、e）主体部分的垂直高度，不包含向上或向下延伸的笔画。它决定了不同字体在相同字号下的实际视觉大小。
Ascender (升部)
小写字母中超出 x字高并向上延伸的笔画部分，例如字母 b、d、h 的上半部分。
Descender (降部)
小写字母中向下延伸并超出基线以下的部分，例如字母 g、j、p 的下半部分。
Cap Height (大写字高)
从基线到大写英文字母（如 H、I）顶端的垂直高度，与 x字高共同决定字体在屏幕上的视觉比例。
_ _____________________________ASCENDER LINE (升部线) | |_ ___ _______________________Cap Height (大写高度线) | |_|_ _|______ _ __ _ _ _ _ ___Mean Line (等高线/x-Height) | | | | \ \/ /| '_ \ | | | | | | | | > < | |_) || |_| | |_|_|___|/_/\_\| .__/__\__, | __BASELINE (基线) _______________|_|_____|___/____Descender Line (下延线) l I x p y
4. 数字排版度量单位 (CSS & Digital Units)
PX (像素 / Pixel)
屏幕显示的基本度量单位。在 CSS 中作为逻辑像素使用，其最终对应的物理像素数量由设备的屏幕像素比（DPR）决定。
1. 标准屏幕 (DPR = 1) ▃▃ ▀▀ 1 CSS Pixel 对应 1个 物理像素 其内部由 RGB 三原色子像素并排排列 2. 高清视网膜屏幕 (DPR = 2) ▃▃ ▃▃ ▀▀ ▀▀ 1 CSS Pixel 对应 4个 物理像素 ▃▃ ▃▃ 像素点密度更高，人眼无法分辨颗粒感 ▀▀ ▀▀ 画面呈现效果因此更为细腻、锐利
PT (点 / Point)
物理长度单位，等于 1/72 英寸。在 iOS 等系统中常作为逻辑测量单位，通过缩放系数映射为物理像素，以保证不同设备上的物理尺寸一致。
╭1 物理英寸 (1 Inch / 2.54 cm) ──────────────────────────╮ │ │ │72 PT (磅/点) ── 每个分格代表 1 pt │ ├──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤ 在 96 DPI 典型显示器上 (密度更高) ├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤
EM (相对单位 / 字符宽度单位)
相对长度单位，1em 等于当前元素（或父元素）的 font-size 计算值。其计算尺寸会随着嵌套层级中的字号变化而累乘。
REM (Root EM / 根相对单位)
相对长度单位，1rem 始终相对于 HTML 根元素的 font-size 计算值，可以避免深度嵌套时的字号累乘计算问题。
<html> (16px)
╰─ <body>
├─ <div class="em"> [font-size: 1.5em] (16px * 1.5 = 24px)
│ ╰─ <div> [font-size: 1.5em] (24px * 1.5 = 36px) 产生累乘
╰─ <div class="rem"> [font-size: 1.5rem] (16px * 1.5 = 24px)
╰─ <div> [font-size: 1.5rem] (16px * 1.5 = 24px) 比例一致
CH (Character Unit / 字符单位)
相对长度单位，等于当前字体中数字 0 的宽度。在等宽字体中，1ch 刚好等于任意单个字符的宽度。
1. 等宽字体 (Monospace Font) ╭─────┬─────┬─────┬─────╮ │ 0 │ i │ w │ l │ 在等宽字体下，所有字符的宽度严格 │ 1ch │ 1ch │ 1ch │ 1ch │ 相同，因此刚好完美容纳 4 个字符 ╰─────┴─────┴─────┴─────╯ 4ch │<──────── 4ch ────────>│ 2. 比例/变宽字体 (Proportional Font) ╭─────┬─┬──────┬──╮ │ 0 │i│ w │l │ 即使字符因为自身的“胖瘦”导致实际 │ 1ch │ │ >1ch │ │ 宽度不一，1ch 依然是以 "0" 的物理 ╰─────┴─┴──────┴──╯ 宽度作为绝对基准
5. 渲染与高级前端术语 (Rendering & Advanced Engineering)
Anti-aliasing (抗锯齿 / 字体平滑)
平滑屏幕上字体边缘的技术。通过在边缘网格中填充不同透明度的过渡像素，减轻阶梯状的锯齿现象。
未开抗锯齿 (Aliased - 纯硬度像素填充) ███ ███ ███ ███ 硬性像素越界：由于没有过渡，边缘落差极大，产生明显阶梯感 开启抗锯齿 (Anti-aliased - 亚像素渐变柔化) ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ ░░░▒▒▒▓▓▓███▓▓▓▒▒▒░░░ 边缘过渡缓冲：利用 ░ (25%)▒ (50%)▓ (75%)█ (100%) 像素羽化，肉眼看去边缘极为圆滑
Font Hinting (字体提示 / 字体微调)
在小字号显示时将字体的关键笔画（如横和竖）对齐至像素边界的技术，用于提升小字号文本在屏幕上的清晰度和锐利度。
1. 无字体微调 (Unhinted - 矢量线卡在缝隙中) 像素切面 边缘极糊 物理像素网格： ├─── 像素 A ───┼────像素 B ───┤ 屏幕渲染结果： ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒ 50%发光 50%发光 屏幕显示 ░░▒▒▒▒░░ ░░▒▒▒▒░░ ░░▒▒▒▒░░ 2. 开启字体微调 (Hinted - 强制吸附边界) 像素切面 边缘锐利 物理像素网格： ├─── 像素 A ───┼────像素 B ───┤ 屏幕渲染结果： ████████████████ 100%全亮 保持熄灭 屏幕显示 ░░██░░░░ ░░██░░░░ ░░██░░░░
FOIT (Flash of Invisible Text / 无形文本闪烁)
网页在加载网络字体时，因文件尚未下载完毕，浏览器先隐藏文字（不显示文字但保留位置），待下载完成后再突然显示新字体的现象。
FOUT (Flash of Unstyled Text / 无样式文本闪烁)
网页在加载网络字体时，因文件尚未下载完毕，浏览器先使用系统默认字体显示文字，待下载完成后再瞬间切换为新字体，从而导致排版发生短暂跳变或闪烁的现象。
Font Fallback (字体回退机制 / 字体栈)
浏览器依次检索备用字体的选择机制。当网页首选字体在设备上不存在或未加载成功时，浏览器会按照 font-family 声明的顺序依次检索后续字体，直到找到可用字形。
Ligature (连字 / 合体字)
将两个或多个相邻字母或符号合并为一个字形显示的技术。可用于消除传统排版中的笔画冲突（如 fi），或在编程字体中将多字符符号（如 =>）渲染为单个连续符号。
输入 输出
编程连字 != ≠
=> ⇒
=== ≡
<-- ⟵
───────────
传统排版连字 fi fi (f 的上钩与 i 的点打架)
fl fl (f 的横笔与 l 的顶端碰撞)