Web端Monaco Editor使用自定义字体时文本选区挤压的问题咨询

成因分析 #

1. 非严格等宽字体导致宽度计算偏差
   Monaco Editor的选区渲染依赖等宽字符的宽度基准，如果你使用的Priffordd Mono并非严格等宽字体，每个字符的实际宽度不一致，会导致编辑器计算选区位置时出现错误，最终表现为选中文本挤压重叠。

2. 内置样式优先级高于自定义样式
   Monaco Editor的选区样式是通过内置的高优先级CSS规则（甚至动态生成的样式）控制的，普通自定义样式无法直接覆盖这些规则，导致你修改的样式无效。

3. 混合非等宽字体干扰布局
   配置中加入的TwemojiRubisco这类emoji字体与等宽字体的基线、字符宽度不兼容，全局混合使用时会打乱编辑器的字符布局计算，引发选区偏移。

解决方法 #

1. 确保使用严格等宽的自定义字体 #

• 验证Priffordd Mono的等宽属性：创建测试页面，用该字体渲染包含字母、数字、符号的文本，检查每个字符的offsetWidth是否完全一致。如果不是严格等宽，更换为该字体的等宽版本，或选择其他成熟的等宽自定义字体。

2. 用高优先级CSS强制覆盖选区样式 #

使用精确的选择器结合!important，直接覆盖Monaco的选区样式：

/* 深色主题选区样式覆盖 */
.monaco-editor.vs-dark .selected-text {
    font-family: 'Priffordd Mono', monospace !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* 浅色主题选区样式覆盖 */
.monaco-editor.vs .selected-text {
    font-family: 'Priffordd Mono', monospace !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

如果你的项目启用了Monaco的Shadow DOM模式，需要使用Shadow DOM穿透选择器（如:host .selected-text）来应用样式。

3. 优化字体 fallback 策略 #

• 将非等宽的fallback字体替换为标准等宽字体，避免布局干扰：

  var editor = monaco.editor.create(document.getElementById('editor'), {
      language: 'html',
      theme: 'vs-dark',
      fontSize: 18,
      fontWeight: "normal",
      // 仅保留自定义等宽字体+系统等宽 fallback
      fontFamily: 'Priffordd Mono, monospace',
      scrollBeyondLastLine: true,
      minimap: { enabled: true },
      lineNumbers: "on",
      wordWrap: "off"
  });
  

• 若需支持emoji，不要全局混合字体，而是通过Monaco的tokenizer功能，单独为emoji字符指定字体，避免影响代码文本的宽度计算。

4. 预加载自定义字体 #

使用CSS预加载确保字体完全加载后再渲染编辑器，避免字体加载过程中的布局偏移：

@font-face {
    font-family: 'Priffordd Mono';
    src: url('path/to/your-font.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 确保字体加载前用系统字体占位，加载后替换 */
    font-stretch: normal;
}

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