I am using react-monaco-editor.
In the global css I set a font family, for example Helvetica, Tahoma, Arial, monospace.
At the same time I have an editor instance on my page that I want to use another font, like "Fira Code", monospace. I set it in the Editor's Optional. The editor shows this font.
But at this point there was a problem, the editor was using a global font when measuring the width of the font. So the error occurs when renderWhitespace and display indent indicator.
I tried to use monaco.editor.remeasureFonts() in Hook or before rendering, but it didn't work.
I think it has something to do with selecting the font monaco uses for measurement, but I can't find how to specify the API for measurement.
Okay, I figured it out.
After reading the editor's source code I found that my global style was interfering with the temporary div width generated by the editor when determining the width.
Refer to this file: https://github.com/microsoft/vscode/blob/d8bc1fa0ff/src/vs/editor/browser/config/charWidthReader.ts
So I found a very stupid but usable solution: (The strange number 50000px is from that file)
*: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;
}