如何通过CSS调用字体的Swash花式替代字符？

你遇到的问题核心是CSS写法错误和特性冲突，按以下步骤调整即可：

1. 修正错误的CSS写法 #

你重复定义了font-feature-settings属性，后定义的内容会完全覆盖之前的配置，导致你之前设置的连字、swash等特性大部分失效；同时第二行配置里的smcp（小型大写转换）特性优先级高于swash，会直接把大写T替换为小型大写版本，自然无法触发卷曲样式。

正确的CSS配置示例：

.target-text {
  font-family: "Zing Rust Script", cursive;
  /* 所有字体特性写在同一条font-feature-settings内，删除冲突的smcp */
  font-feature-settings: "liga" on, "dlig" on, "kern" on, "swsh" 1;
  /* 补充Safari兼容性更好的变体属性 */
  font-variant-ligatures: normal;
  font-variant-alternates: swash(1);
}

如果Zing Rust Script的T卷曲样式需要第二套swash，把上面的swsh 1改成swsh 2即可。

2. 单个字符单独适配 #

如果只需要特定位置的T显示卷曲样式，给对应字符单独套标签加样式即可：

<p class="target-text">
  <span class="swash-t">T</span>his is test text
</p>

.swash-t {
  font-feature-settings: "swsh" 1 !important;
  font-variant-alternates: swash(1) !important;
}

3. 确认字体文件完整性 #

如果调整后仍不生效，检查你使用的Web字体文件是否被子集化精简过：部分在线字体转换工具会默认删掉OpenType高级特性，你需要使用包含完整Swash特性的完整版字体文件转成WOFF2等Web格式使用，也可以用本地字体查看工具打开字体文件，确认T.swsh替代字符确实存在、swash特性的索引值是否和你CSS写的一致。

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