使用支持连字的字体时CodeMirror编辑器不显示连字

环境与配置 #

当前使用的CodeMirror相关依赖版本：

"codemirror": "^6.0.1",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-sql": "^6.8.0",

已通过代码设置本地安装的编程字体：

cfg.push(EditorView.theme({
  '& .cm-content': {
    fontSize: fontSize,
    fontFamily: fontFamily, // 已设置为"CaskaydiaCove Nerd Font Mono"
  },
  '.cm-gutters': {
    fontSize: fontSize,
  },
}));

问题现象 #

• 确认编辑器已成功加载指定字体，但输入符号序列=== != ?= <- >=时，未显示编程字体应有的连字效果。
• 在普通HTML环境（如下方代码）中，相同字体可正常显示连字：

<html lang="en">
<head>
  <style>
    .lig-support {
      font-family: "CaskaydiaCove Nerd Font Mono";
      font-size: 19pt;
    }
  </style>
</head>
<body bgcolor="white">
  <div class="lig-support" contenteditable="true">
    <span>
      === != ?= <- >=
    </span>
  </div>
</body>
</html>

• 更新说明：本地StackOverflow预览及其他HTML playground中连字均正常显示，仅CodeMirror编辑器内异常。

解决思路 #

1. 显式启用字体连字CSS属性 #

CodeMirror可能存在隐含的样式重置，导致连字被禁用。可以在主题配置中强制添加连字相关属性：

cfg.push(EditorView.theme({
  '& .cm-content': {
    fontSize: fontSize,
    fontFamily: fontFamily,
    // 显式开启所有连字类型
    fontVariantLigatures: 'common-ligatures discretionary-ligatures contextual',
    // 或者直接设置为normal，继承字体默认的连字设置
    // fontVariantLigatures: 'normal',
  },
  '.cm-gutters': {
    fontSize: fontSize,
  },
}));

2. 检查文本Token拆分情况 #

CodeMirror 6会根据语法规则将文本拆分为不同的token（如运算符、符号会被单独包裹在<span>中），而连字需要字符处于同一个DOM节点才能触发。

• 打开Chrome开发者工具，查看.cm-content下的DOM结构，确认目标符号序列是否被拆分成了多个独立元素。
• 如果是Token拆分导致的，可以尝试自定义语法规则，将需要连字的符号序列识别为单个Token；或者临时切换到无语法高亮的基础模式，验证连字是否生效。

3. 确认字体实际生效状态 #

浏览器可能因字体加载顺序或fallback机制，未真正使用指定的CaskaydiaCove字体：

• 在Chrome开发者工具的元素样式面板中，点击font-family属性旁的字体图标，查看当前实际应用的字体。
• 可以在fontFamily中明确指定优先级，避免fallback到其他字体：

fontFamily: '"CaskaydiaCove Nerd Font Mono", monospace',

4. 排查第三方扩展干扰 #

部分CodeMirror扩展（如lint、格式化、语法检查插件）可能修改DOM结构或样式，导致连字失效：

• 暂时禁用所有非核心扩展，仅保留基础编辑器实例，测试连字是否恢复。
• 逐步重新启用扩展，定位到导致问题的具体插件。

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