tgoop.com/cosine_front_end/2883
Create:
Last Update:
Last Update:
#优质博文 #前端 #CSS #typography #font #opentype
这篇文章还推荐了一个可以玩这些可变字体的网站 v-fonts.com
Features of your font you had no idea about
AI 摘要：本文深入介绍了高质量字体 (high-quality fonts) 所附带的各种隐藏功能，尤其是 OpenType 及 Variable Fonts 的特性，如 axes 变化、替代字形 (alternates)、swashes、数字样式 (numerals)、小型大写 (small caps)、上下文替换 (contextual alternates) 等，并结合 CSS 的相关属性给出实践方式。文章核心思想是：字体远不止「粗体/斜体」，合理启用这些特性能够提升应用设计的可读性与美感。
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. Variable Axes（可变字体轴线）
• OpenType 字体支持多个轴 (axes)，如 wght(weight)、wdth(width)、slnt(slant)、ital(italic)、opsz(optical size)。
• CSS 提供对应属性 (如 font-weight)，但对于自定义轴需用 font-variation-settings。
• font-variation-settings 存在级联冲突问题，可通过 CSS variables 解决。
2. Alternates（替代字形）
• Stylistic alternates：用 salt、ss01、cv01 等替换字符形态（如 “a”、“g”）。
• CSS 可通过 font-feature-settings 或 font-variant-alternates 控制，后者更可读，但同样有继承覆盖问题。
3. Swashes（装饰性字形）
• 一些字体附带装饰性笔画 (swashes)，可增强标题表现力。
• 使用 font-feature-settings 或 font-variant-alternates 启用。
4. Numerals（数字字形样式）
• 字体可包含 lining numerals（对齐大写字母高度）、old-style numerals（小写高度）、tabular（等宽）、proportional（按比例）。
• 使用 font-variant-numeric 控制，如 tabular-nums、oldstyle-nums。
• 场景：表格更适合 tabular，正文常用 proportional 或 old-style。
5. Small Caps（小型大写）
• 小型大写可减少正文中大写字母突兀的问题。
• 使用 font-variant-caps（small-caps 或 all-small-caps）。
• 避免浏览器自动合成（非真正小型大写），可通过 font-synthesis 禁用。
6. Contextual Alternates（上下文替换）
• 自动替换特定上下文中的字符形态，如 → 符号、@ 符号的排版优化。
• 多数字体默认启用，可通过 font-variant-ligatures: no-contextual 禁用。
7. Further Reading（扩展资料）
• 提及更多 OpenType 特性（连字、分数、历史字形、花饰等）。
• 推荐网站、演讲与「Variable Fonts Primer」。
author OlegWock
BY cosine - 前端人の日常频道
Share with your friend now:
tgoop.com/cosine_front_end/2883