React应用中Manrope字体自动将(c)转为©字符的问题求助

这是Manrope字体内置的**标准连字（Standard Ligatures）**特性导致的——字体文件中预设了将(c)映射到版权符号©的字形替换规则，浏览器渲染时会自动触发该规则。这种行为是字体设计的特性，并非无法修改，以下是几种可行的解决方法：

全局禁用连字（CSS） #

如果希望整个应用都屏蔽这类自动替换，可在全局样式中添加：

body {
  font-family: 'Manrope', sans-serif;
  font-variant-ligatures: none;
}

或者更精准地禁用特定连字规则：

body {
  font-family: 'Manrope', sans-serif;
  font-feature-settings: "liga" 0, "calt" 0;
}

• liga：关闭标准连字替换
• calt：关闭上下文相关的连字替代

局部禁用（针对特定元素） #

若仅需在部分组件/输入框中保留(c)，给目标元素添加专属样式类：

.no-ligatures {
  font-variant-ligatures: none;
}

在React组件中使用：

<div className="no-ligatures">这里的(c)不会被转换为©</div>
<input className="no-ligatures" placeholder="输入(c)测试效果" />

字符转义（应急方案） #

如果无法修改样式，可通过字符转义规避替换：

• 使用HTML实体：(c) 对应原始的(c)
• 在React中直接使用字符串字面量：

<p>{`(c)`} 或者 {'(c)'}</p>

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