网站字体渲染Bug：ś在单词中被转为´s，求解决方法

问题现象 #

使用Patrick Hand手写字体时，单词“ryś”被错误渲染为“ry's”，但单独的“ś”显示正常。

排查方向 #

• 字体字形替换规则：Patrick Hand作为手写体，内置了连字（ligatures）和上下文字形替换逻辑，可能是“ry”与“ś”的组合触发了错误的字形映射，把ś替换成了带撇的样式。
• 字体本身的字符支持bug：该字体对拉丁扩展字符（如ś）的上下文组合处理存在缺陷，导致特定字符组合渲染异常。
• 浏览器渲染引擎差异：不同浏览器的字体渲染引擎对字形替换的解析逻辑不同，可在Chrome、Firefox等多浏览器验证是否为共性问题。

解决方法 #

方法1：禁用字体连字（推荐） #

通过CSS强制关闭字体的连字替换功能，阻止错误的字形映射：

* {
  font-family: "Patrick Hand", cursive;
  font-weight: 400;
  font-style: normal;
  font-variant-ligatures: none; /* 禁用所有连字替换 */
}

如果需要保留部分正常连字（如“fi”“fl”），可以更精准地控制：

font-variant-ligatures: discretionary-ligatures off;

方法2：替换为兼容字体 #

如果禁用连字影响了手写体的风格，可以换用对拉丁扩展字符支持更完善的手写字体，比如：

font-family: "Indie Flower", cursive;

或

font-family: "Architects Daughter", cursive;

方法3：使用字符实体（临时 workaround） #

将“ś”替换为HTML字符实体ś，强制浏览器渲染单个字符：

<h2>ry&#347; ś</h2>

此方法仅为临时修复，优先推荐前两种方案。

验证步骤 #

修改代码后刷新浏览器，确认“ryś”显示正常，同时检查其他手写体的常规连字效果（若有需求）是否不受影响。

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