@font-feature-values的核心作用是为opentype特性(如ss01、cv05)创建语义化别名,提升font-variant-alternates调用的可读性与可维护性;它不加载字体,仅在对应@font-face声明的字体上生效,且需严格匹配font-family名称。

什么是 @font-feature-values 的核心作用
它不加载字体,也不定义字体文件路径,只给 OpenType 特性(如 ss01、cv05)起一个语义化名字,让 font-variant-alternates 或 font-feature-settings 调用时更易读、可维护。
比如把生硬的 "ss01" 映射为 stylistic-salt,后续写 font-variant-alternates: stylistic(stylistic-salt); 就比直接写 font-feature-settings: "ss01"; 更清晰。
@font-feature-values 必须配合 @font-face 使用
浏览器不会自动识别你定义的别名——它只在对应 @font-face 块中声明的字体上生效。同一个别名在不同字体里可以指向不同特性,但跨字体调用会失效。
常见错误:定义了 @font-feature-values 却没在目标 @font-face 中指定 font-family 名,或拼写不一致(大小写、空格、连字符都敏感)。
- 确保
@font-feature-values开头的font-family值与@font-face中的完全一致,包括引号和空格 - 必须先声明
@font-face,再声明@font-feature-values(CSS 顺序敏感) - 不能用通配符或变量,只能是字面量字符串
@font-face {
font-family: "MySerif";
src: url("myserif.woff2") format("woff2");
}
@font-feature-values "MySerif" {
@stylistic {
stylistic-salt: 1;
}
@swash {
elegant-swash: 2;
}
}
支持的特性类型和语法限制
CSS 当前只支持五类 OpenType 特性映射:@stylistic、@swash、@ornaments、@annotation、@character-variant。不支持 liga、frac、numr 等通用特性,也不能映射数字值以外的参数(比如不能把 cv05 映射成带条件的表达式)。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图,自动匹配视觉风格。触发场景:文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
每个特性类型下,别名必须唯一,且只能绑定一个整数(即 OpenType 特性索引),不能是范围或布尔开关。
-
@stylistic对应ss01–ss20 -
@swash对应swsh和cswh的变体编号 -
@character-variant对应cv01–cv99,注意不是所有字体都实现全部 - 别名本身不能含空格、不能以数字开头、不能用 CSS 关键字(如
none、inherit)
实际调用时仍需启用字体特性支持
定义别名只是第一步。真正启用效果,还得靠 font-variant-alternates 或降级用 font-feature-settings。而且只有当字体本身嵌入了对应 OpenType 特性,并且浏览器支持(Chrome/Firefox/Edge 基本 OK,Safari 对部分特性支持滞后),才能看到变化。
容易被忽略的是:如果字体未打包该特性,或者用了 font-feature-settings 手动覆盖,@font-feature-values 定义的别名就完全不生效。
- 推荐优先使用
font-variant-alternates: stylistic(stylistic-salt);,语义清晰且可继承 - 调试时可用
font-feature-settings: "ss01";直接验证特性是否存在 - 别名不可组合使用(例如不能在一个声明里同时用两个
@stylistic别名),需合并进同一组调用或拆成多个规则
别名本质是“翻译层”,它解决的是可读性问题,而不是兼容性问题——底层依赖没变,该查字体文档还得查,该测 Safari 表现还得测。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










