从像素到灵魂：深入解析字体排印与 Android 字体架构（10）：千变万化，始于一文：可变字体 (Variable Fonts)
本文是「从像素到灵魂：深入解析字体排印与 Android 字体架构」系列的第 10 篇，共 15 篇。在上一篇中，我们探讨了「分总结与展望」的相关内容。
第二章：千变万化，始于一文：可变字体 (Variable Fonts)
传统数字字体的一大限制是“离散性”：每个字重（如 Regular, Bold）和样式（如 Italic）都需要一个单独的字体文件。如果一个设计需要非常精细的字重控制，或者多种字宽变体，那么包含的字体文件数量可能会急剧增加。可变字体 (Variable Fonts) (OpenType 规范 1.8 版本引入) 正是为了解决这个问题而生。
1. 可变字体的革命性概念
- **核心思想：** 一个可变字体文件**内部包含了设计的“变化轴 (Variation Axis)”**。这些轴定义了字形可以沿着某些维度（如粗细、宽度、倾斜度等）进行**连续变化**。
- **对比传统字体：**
* 传统字体：提供几个固定的“快照”（如 Regular, Bold）。
* 可变字体：提供一个**设计的“空间”**，你可以在这个空间内沿着定义好的轴，插值出**几乎无限多种**样式。2. 可变字体的核心优势
- **大幅减少文件体积：** 一个可变字体文件通常比包含相同设计范围内多个静态实例的字体文件集合要小得多。这对于打包和下载都极为有利。
- **无级样式变化：** 你不再局限于预设的几个档位（如 400, 700）。可以精确选择任意中间值（例如，字重 453.7），实现极其细腻的排版控制。
- **设计灵活性：** 允许设计师根据上下文微调字体样式。例如，在小字号下稍微增加字重和字宽以提高易读性（利用 opsz 光学尺寸轴），或者在大标题上使用更窄的字宽以节省空间。
- **动画潜力：** 由于样式可以连续变化，可变字体非常适合制作平滑的字体动画效果（例如，按钮按下时字重平滑增加）。3. 理解变化轴 (Variation Axes)
每个可变字体都定义了一组可供调整的轴。有五种 W3C 注册的标准轴：
- wght (Weight): 字重，控制笔画粗细。范围通常是 1 到 1000 (同 fontWeight)。
- wdth (Width): 字宽，控制字形的水平伸展程度（Condensed 到 Expanded）。通常以相对于正常宽度的百分比表示 (如 100 代表正常宽度)。
- slnt (Slant): 倾斜度，控制字形的倾斜角度。通常范围是 -90 到 90 度。**注意：** 这通常是算法倾斜 (Oblique)，与专门设计的 ital 轴不同。
- ital (Italic): 意大利体。这是一个**开关式**的轴，通常只有 0 (关闭/Normal) 和 1 (开启/Italic) 两个值。当值为 1 时，会切换到字体内部定义的、真正设计的意大利体字形（如果存在）。
- opsz (Optical Size): 光学尺寸。允许字体根据**使用的字号**自动微调字形设计（如调整对比度、字间距、细节复杂度），以在不同尺寸下都获得最佳的可读性和美观度。设计师预设好不同尺寸下的理想形态，渲染时根据实际字号插值。除了标准轴，字体设计师还可以定义自定义轴 (Custom Axes)，用四个大写字母或数字的标签来标识（例如 TEMP, GRAD)，用于控制特定的设计特征。
4. 在 Android 中使用可变字体 (需要 API 26+)
Android 从 API 26 开始原生支持可变字体。
- **获取字体：**
* **打包：** 将可变字体文件（通常是 .ttf 格式）放入 res/font 目录，就像普通字体一样。
* **下载：** Google Fonts 提供了许多可变字体，可以通过可下载字体机制获取。
- **在 XML 布局中使用：**
1. 使用 android:fontFamily 引用可变字体文件或包含该文件的字体家族 XML。
2. 使用 android:fontVariationSettings 属性来指定轴设置。
+ **语法：** 类似于 CSS font-variation-settings。使用单引号包裹轴名称（4 字符标签），后面跟一个空格和数值。多个轴设置用逗号分隔。
+ **示例：** XML<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/my_variable_font"
android:text="Weight 650"
android:fontVariationSettings="'wght' 650" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/my_variable_font"
android:text="Weight 300, Width 80"
android:fontVariationSettings="'wght' 300, 'wdth' 80" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/my_variable_font"
android:text="Slant -12 degrees"
android:fontVariationSettings="'slnt' -12" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fontFamily="@font/my_variable_font_with_ital"
android:text="Italic Style via Axis"
android:fontVariationSettings="'ital' 1" />- 注意： android:textStyle (bold/italic) 属性不会自动映射到 wght 或 ital 轴。你需要直接使用 fontVariationSettings 来控制这些轴。如果同时设置了 textStyle=“bold” 和 ‘wght’ 400，行为可能未定义或取决于系统实现，最好避免混用，直接用 fontVariationSettings 控制。
- 在代码中使用：
- 首先，像加载普通字体一样获取可变字体的 Typeface 对象 (e.g., ResourcesCompat.getFont())。
- 使用 Typeface.Builder 来创建具有特定轴设置的新 Typeface 实例。 Kotlin
// Kotlin
val baseVariableTypeface: Typeface? = ResourcesCompat.getFont(context, R.font.my_variable_font)
baseVariableTypeface?.let { baseTf ->
// 创建一个 Weight 550, Width 110 的 Typeface
val customVariationSettings = "'wght' 550, 'wdth' 110"
val customTypeface: Typeface = Typeface.Builder(baseTf)
.setFontVariationSettings(customVariationSettings)
.build()
myTextView.typeface = customTypeface
// 示例：动画化字重
val animator = ValueAnimator.ofInt(100, 900)
animator.duration = 1000
animator.addUpdateListener { animation ->
val currentWeight = animation.animatedValue as Int
val settings = "'wght' $currentWeight"
try { // Builder 可能因无效设置抛异常
val animatedTypeface = Typeface.Builder(baseTf)
.setFontVariationSettings(settings)
.build()
animatedTextView.typeface = animatedTypeface
} catch (e: IllegalArgumentException) {
// Handle invalid settings if necessary
}
}
animator.start()
}Java
// Java
Typeface baseVariableTypeface = ResourcesCompat.getFont(context, R.font.my_variable_font);
if (baseVariableTypeface != null) {
// Create with specific settings
String customVariationSettings = "'wght' 550, 'wdth' 110";
Typeface customTypeface = null;
try {
customTypeface = new Typeface.Builder(baseVariableTypeface)
.setFontVariationSettings(customVariationSettings)
.build();
} catch (IllegalArgumentException e) {
// Handle potentially invalid settings string format
}
if (customTypeface != null) {
myTextView.setTypeface(customTypeface);
}
// Example: Animate weight
ValueAnimator animator = ValueAnimator.ofInt(100, 900);
animator.setDuration(1000);
animator.addUpdateListener(animation -> {
int currentWeight = (Integer) animation.getAnimatedValue();
String settings = "'wght' " + currentWeight;
Typeface animatedTypeface = null;
try {
animatedTypeface = new Typeface.Builder(baseVariableTypeface)
.setFontVariationSettings(settings)
.build();
} catch (IllegalArgumentException e) {
// Handle error
}
if (animatedTypeface != null) {
animatedTextView.setTypeface(animatedTypeface);
}
});
animator.start();
}- 重要： 每次调用 setFontVariationSettings().build() 都会创建一个新的 Typeface 对象。在动画或频繁更新的场景下，这可能会带来性能开销和内存压力。虽然比加载多个静态字体文件要好，但仍需注意，避免在绘制循环等高性能要求的地方频繁创建。缓存常用的 Typeface 实例仍然是好主意。
5. 注意事项与资源
- API Level: 严格要求 API 26 (Android 8.0 Oreo) 或更高版本。
- 字体支持： 确保你使用的字体文件确实是可变字体，并了解它支持哪些轴以及各轴的取值范围（通常由字体设计者提供文档）。
- 测试： 在不同设备和 Android 版本（API 26+）上充分测试显示效果和性能。
- 资源： Google Fonts 网站现在有专门的 Variable Fonts 分类。可以访问 v-fonts.com 或 axis-praxis.org 等网站探索和测试可变字体。
小结： 可变字体代表了字体技术的未来方向，它通过单一文件提供了前所未有的样式灵活性和资源优化。掌握在 Android (API 26+) 上使用 fontVariationSettings (XML) 和 Typeface.Builder (Code) 的方法，可以为你的应用带来显著优势。
下一篇我们将探讨「未雨绸缪：字体预加载 (Font Preloading)」，敬请关注本系列。
「从像素到灵魂：深入解析字体排印与 Android 字体架构」系列目录
- 万丈高楼平地起：奠定字体排印的坚实基础
- 初识门径：字体的基本分类
- 分小结与展望
- 从曲线到像素——字体渲染管线揭秘
- 无规矩不成方圆——字体授权与合规
- Android 的原生字体生态：Roboto、Noto 与字体回退
- 指令式操作：在代码中动态设置字体
- 个性化表达：打包和使用自定义字体
- 分总结与展望
- 千变万化，始于一文：可变字体 (Variable Fonts)（本文）
- 未雨绸缪：字体预加载 (Font Preloading)
- 放眼全球：国际化 (I18N) 与字体再思考
- 千挑万选：为你的 App 选择合适的字体
- 现代 UI 的字体之道：Jetpack Compose 中的实践
- 包容性设计：无障碍 (Accessibility) 与字体