如何用CSS OpenType仅替换全站文本的小写g为Stylistic Set 1中的单层g

核心方案：精准调用单个字符的OpenType变体 #

Rotunda的Stylistic Set 1（ss01）包含多个替代字形，但无需全局开启这个集合——直接用font-feature-settings指定小写g对应的Character Variant（cv）特性即可，避开需要字符索引的font-variant-alternates方案。

具体代码实现 #

/* 全局应用到所有使用Rotunda的文本 */
body {
  font-family: 'Rotunda', sans-serif;
  /* 替换cv01为Rotunda中小写g对应的cv值，需自行验证 */
  font-feature-settings: "cv01" 1;
  /* 兼容旧浏览器的前缀写法 */
  -webkit-font-feature-settings: "cv01" 1;
  -moz-font-feature-settings: "cv01" 1;
}

如何确认小写g对应的cv值 #

• 用FontForge或类似字体工具打开Rotunda字体文件
• 定位到小写字母g的字形，查看其关联的Character Variant标记（格式为cv01至cv99）
• 将代码中的cv01替换为实际对应的标记即可

为什么放弃JS方案 #

• 批量给小写g加<span>会暴增DOM节点，拖慢页面加载与渲染性能
• 会引发文本闪烁问题，损害用户体验
• CSS原生方案跨浏览器兼容性更好，无需额外脚本开销

浏览器兼容性 #

• 支持Chrome 4+、Firefox 3.5+、Safari 5.1+、Edge 12+等所有现代浏览器
• 旧版IE需保留带前缀的写法，但IE11及以上已支持标准语法

内容的提问来源于stack exchange，提问作者Bento