Estoy usando react-monaco-editor.
En el css global configuré una familia de fuentes, por ejemplo Helvetica, Tahoma, Arial, monospace .
Al mismo tiempo, tengo una instancia de editor en mi página que quiero usar otra fuente, como "Fira Code", monospace . Lo configuré en el Editor's Optional. El editor muestra esta fuente.
Pero en este punto hubo un problema, el editor estaba usando una fuente global al medir el ancho de la fuente. Entonces, el error ocurre cuando se renderizan los espacios en blanco y se muestra el indicador de sangría. Traté de usar monaco.editor.remeasureFonts() en Hook o antes de renderizar, pero no funcionó.
Creo que tiene algo que ver con la selección de la fuente que monaco usa para la medición, pero no puedo encontrar cómo especificar la API para la medición.
Está bien, lo descubrí.
Después de leer el código fuente del editor, descubrí que mi estilo global interfería con el ancho div temporal generado por el editor al determinar el ancho.
Consulte este archivo: https://github.com/microsoft/vscode/blob/d8bc1fa0ff/src/vs/editor/browser/config/charWidthReader.ts
Entonces encontré una solución muy estúpida pero utilizable: (El extraño número 50000px es de ese archivo)
*: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; }