# 配了多年字体，今天才发现西文字体里那些花体字从来没在 CSS 里被原生调用过——Safari STP 158 把这件事彻底原生化了

用过专业西文字体（Adobe Garamond、Futura、Gotham）的前端工程师都踩过这个坑：字体包里明明有 swash（装饰性花体字母）、stylistic sets（字形替换集）、alternates（交替字形），但 CSS 里根本不知道怎么调出来，`font-style: italic` 只是斜了，没有花体。设计师指着字体里的 alternate A 问「这个能用吗」，前端只能回答「CSS 调不了」。今天 Safari Technology Preview 158 把 `@font-feature-values` 和 `font-variant-alternates` 正式做进来了——CSS 终于能直接调用字体里的 alternate glyph 了。

## 以前怎么用 alternate glyph

字体里的 alternate glyph（交替字形）是 OpenType 字体规范的一部分，通过「feature tag」来访问：

“`css
/* 以前的土法：直接写 OpenType feature tag */
.my-text {
font-family: ‘Adobe Garamond Pro’, serif;
/* 这些数字是 OpenType feature tag，需要查字体文档才知道 */
font-feature-settings: ‘swsh’ 1, /* swash */
‘ss01’ 1, /* stylistic set 1 */
‘onum’ 1; /* old-style numerals */
}
“`

问题：feature tag 是字体的私有信息，`swsh`、`ss01`、`onum` 这些字符串不直观，设计师给的名字（”stylistic alternate A”、”swash capitals”）跟 tag 对不上，换一个字体所有 feature tag 就全要重查。

## 今天 `@font-feature-values` 把命名规范化了

Safari Technology Preview 158 支持 `@font-feature-values` 规则，让你在 CSS 顶层**给 OpenType feature 起一个语义化的名字**，然后用 `font-variant-alternates` 直接引用这个名字。

“`css
/* 第一步：在 CSS 顶层定义字体特征的名字 */
@font-feature-values ‘Adobe Garamond Pro’ {
/* 给 swash 起一个语义化的别名 */
@swash {
delicate: 1; /* swash 特征 1 = delicate swash */
flowing: 2; /* swash 特征 2 = flowing swash */
}

/* 给 stylistic set 起别名 */
@stylistic {
humanist: 3; /* stylistic set 3 = humanist 小写 */
geometric: 4; /* stylistic set 4 = geometric 风格 */
}

/* 给数字风格起别名 */
@numeric-figure {
oldstyle: ‘onum’; /* 直接用 tag 做值也行 */
}
}

/* 第二步：在样式里直接引用语义化名称 */
.my-heading {
font-family: ‘Adobe Garamond Pro’, serif;
font-variant-alternates: swash(flowing); /* 流畅花体 */
}

.my-intro {
font-family: ‘Adobe Garamond Pro’, serif;
font-variant-alternates: stylistic(humanist); /* 古典小写体 */
}

.article-body {
font-family: ‘Adobe Garamond Pro’, serif;
font-variant-alternates: numeric-figure(oldstyle); /* 老式数字 */
}
“`

对比前后：

“`css
/* 以前：查文档才知道 1 是哪个花体 */
font-feature-settings: ‘swsh’ 1;

/* 今天：名字即语义，设计师也能看懂 */
font-variant-alternates: swash(delicates);
“`

## 支持的特征类型

“`css
@font-feature-values ” {
@swash { … } /* swash 装饰性字母 */
@stylistic { … } /* stylistic set 字形替换集 */
@character-variant { … } /* 具体字符的字形变体 */
@styleset { … } /* character-level styleset */
@ornaments { … } /* ornaments 装饰符号 */
@numeric-figure { … } /* 数字风格 */
@numeric-spacing { … } /* 数字间距 */
}
“`

## 完整使用例子

“`html

/* 定义字体特征名 */
@font-feature-values ‘Futura LT Pro’ {
@swash {
classic: 1;
extended: 2;
}
@stylistic {
poster: 3;
display: 4;
}
}

/* 应用 */
.logo {
font-family: ‘Futura LT Pro’, sans-serif;
font-variant-alternates: swash(extended); /* 扩展花体 */
font-size: 4rem;
letter-spacing: 0.05em;
}

blockquote {
font-family: ‘Futura LT Pro’, sans-serif;
font-variant-alternates: stylistic(poster); /* 海报风格装饰 */
font-style: italic;
}

p {
font-family: ‘Futura LT Pro’, sans-serif;
font-variant-alternates: swash(classic);
}

Artistry

Less is more

Typography is the craft of endowing human language with a durable visual form.

“`

## 浏览器支持

| 浏览器 | 支持情况 |
|——–|———|
| Safari | **Safari STP 158+（本功能）** |
| Safari 稳定版 | ❌ 尚未支持 |
| Chrome/Edge | ❌ 暂无信号 |
| Firefox | 98+（部分） |

> `@font-feature-values` 规范本身 Firefox 98+ 已部分支持，但 Safari STP 158 的更新把 `font-variant-alternates` 与 `@font-feature-values` 的完整联动做了进来。字体交替字形是 Safari Typography 系列功能的延续，设计师值得关注。

## 三步落地

1. **查字体文档**：确认字体包里有哪些 feature（OpenType feature tag），对应名字是什么
2. **CSS 顶层声明**：用 `@font-feature-values` 给 feature 起语义名，设计系统里统一管理
3. **样式引用**：在具体元素上用 `font-variant-alternates` 引用，不需要再记 feature tag 数字

“`css
/* 在设计系统里集中管理 */
@font-feature-values ‘Inter’ {
@stylistic {
tabular-nums: ‘tnum’; /* 等宽数字，tag 直接用字符串也行 */
scientific: ‘sinf’;
}
}

/* 组件里直接用语义名 */
.price-display {
font-variant-alternates: stylistic(tabular-nums);
}
“`

—

`@font-feature-values` + `font-variant-alternates` 的价值是把「字体设计资产」从设计师的工具箱里正式引入到 CSS 层——alternate glyph 第一次有了语义化的引用方式，不再需要查 OpenType feature tag 文档。Safari STP 158 先走一步，稳定版跟进后可以把它纳入设计系统的字体配置里。