CSS OpenType：如何用 Stylistic Set 1 中的字符替换整个文本中的单个字母而不影响其他字母？

Question

想要实现：
我们希望在整个网站文本中将双层小写“g”替换为单层版本。

问题：
我们的字体 Rotunda（TipoType Foundry 链接）有一个风格集 1，其中还包含其他替代字符。但是，我们只想更改小写 g，而不影响任何其他字母。

线索：
有一些 CSS OpenType 功能似乎只允许替换单个字母，但我们无法让它工作。我们发现这个 Reddit 帖子列出了相同的问题，并且用户发布了这个解决方案：

如果您的字体只有一种样式集 ss01，并且您只想更改 ss01 集中的小写“g”，则可以使用 CSS 中的 font-variant-alternates 属性。此属性允许您访问字体中的替代字形。

您可以使用以下 CSS 代码来访问 ss01 集中的备用“g”：

选择器 { font-variant-alternates: "ss01" 1; }

您可以将选择器替换为要应用样式的元素的选择器。 “ss01”值指的是字体的 ss01 风格集。 1 值指的是 ss01 集中替代“g”字形的索引。

但是，我们不确定如何找到小写“g”的实际索引号。

另一个资源是this，它建议使用“font-variant-alternates”（风格（特征值名称）），但它们似乎再次通过“inscriptional-g”等选择器来定位字母。我们不知道 Rotunda 字体中的这个小写选择器。

我们的感觉是，这可以通过 font-variant-alternates 参数来实现，但我们无法将正确的 CSS 放在一起。

---

我们成功尝试了一个Javascript选项，在小写“g”的所有实例周围添加一个span标签，并以这种方式定位字符。但似乎效率低下，而且页面替换字符时还会有短暂的“闪现”。我们正在寻找一种安全的跨浏览器 (CSS) 解决方案来实现这一目标。

Answer 1

您应该能够通过

@font-feature-values

或

font-feature-settings

应用替代样式集。

您可以使用工具 wakamai 火锅

检查所有替代功能

@font-face{
  font-family: 'Plex Serif';
  font-weight: normal;
  font-style: normal;
  src : url('https://mdn.github.io/css-examples/font-features/fonts/plex/IBMPlexSerif-Regular.woff')
}

body{
font-family: 'Plex Serif';
font-size:10vmin;
}

@font-feature-values "Plex Serif" {
  @styleset { alt-a: 1; alt-g: 2; }
}

.alt-g{
  font-variant-alternates: styleset(alt-g);
}

.alt-g2{
  font-feature-settings: 'ss02' 1;
}

.alt-a{
  font-variant-alternates: styleset(alt-a);
}

<p class="">a-standard g-standard</p>
<p class="alt-g">alt-g a-standard</p>
<p class="alt-g2">alt-g2 a-standard</p>
<p class="alt-a">alt-a g-standard</p>