时间戳

首页 > 解决方案 > 如何使用 monaco 编辑器在页面上使用两种不同的字体？

javascript - 如何使用 monaco 编辑器在页面上使用两种不同的字体？

问题描述

我正在使用 react-monaco-editor。

在全局 css 中，我设置了一个字体系列，例如Helvetica, Tahoma, Arial, monospace.

同时，我的页面上有一个编辑器实例，我想使用另一种字体，例如"Fira Code", monospace. 我在编辑器的可选中设置它。编辑器显示此字体。

但是此时出现了一个问题，编辑器在测量字体宽度时使用的是全局字体。所以在 renderWhitespace 和显示缩进指示符时会出现错误。我尝试monaco.editor.remeasureFonts()在 Hook 中或渲染之前使用，但没有成功。

我认为这与选择 monaco 用于测量的字体有关，但我找不到如何指定用于测量的 API。

标签： javascriptcssreactjsmonaco-editorvisual-studio-monaco

解决方案

好吧，我想通了。

看了编辑器的源码后发现我的全局样式干扰了编辑器在确定宽度时生成的临时div宽度。

参考这个文件：https ://github.com/microsoft/vscode/blob/d8bc1fa0ff/src/vs/editor/browser/config/charWidthReader.ts

所以我找到了一个非常愚蠢但可用的解决方案：（奇怪的数字 50000px 来自那个文件）

*:not(div[style*='50000px']) {
  font-family: Helvetica, Tahoma, Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "Fira Code", monospace;
}

推荐阅读