请问一下如何修改字体?

[qzd1989]

Describe the bug

无论我怎么修改,都没有效果. 这几个是内置通用字体,用于其他元素上都正常显示..

Steps to reproduce

<script setup>
const cmInstance = ref(null);
const cmRef = ref(null);
const cmOptions = {
  mode: "javascript",
  theme: "material",
  lineWrapping: true,
  matchBrackets: true,
  autoCloseBrackets: true,
  styleActiveLine: true,
  showCursorWhenSelecting: true,
};
onMounted(async () => {
if (cmRef.value != null) {
    cmInstance.value = cmRef.value.cminstance;
    cmInstance.value.getWrapperElement().style.fontSize = "16px"; //有效
    cmInstance.value.getWrapperElement().style.fontFamily =
      "Arial, Helvetica, sans-serif!important"; //无效
  }
});
</script>
<template>
<Codemirror
              v-model:value="form.content"
              :options="cmOptions"
              border
              ref="cmRef"
              :style="{
                height: contentHeight + 'px',
                fontFamily: 'Arial, Helvetica, sans-serif!important', //无效
              }"
            >
            </Codemirror>
</template>

问题样式截图

正常样式截图

Package Info

"vue": "^3.5.0",
"codemirror": "^5.65.17",
"codemirror-editor-vue3": "^2.7.0",

Validations

• [X] Is it the latest version?
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [X] The provided reproduction is a minimal reproducible example of the bug.

[rennzhang]

要用 class 去改，产生作用的是组件下一级的.CodeMirror 标签上的font-family属性，示例如下：

<template>
  <div class="h-500px w-300px">
    <Codemirror
      originalStyle
      :options="cmOptions"
      class="cm-component"
      @ready="onReady"
      @scroll="onScroll"
      v-model:value="code"
      :border="true"
    />
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from "vue";
import { Editor, EditorSelectionChange } from "codemirror";
import Codemirror from "codemirror-editor-vue3";
// language
import "codemirror/mode/javascript/javascript.js";
import "codemirror/addon/selection/active-line";

// theme
// import "codemirror/theme/";

export default defineComponent({
  components: {
    Codemirror,
  },
  setup() {
    const code = ref(`function findSequence(goal) {
  function find(start, history) {
    if (start == goal)
      return history;
    else if (start > goal)
      return null;
    else
      return find(start + 5, "(" + history + " + 5)") ||
             find(start * 3, "(" + history + " * 3)");
  }
  return find(1, "1");
}`);

    return {
      code,
      cmOptions: {
        mode: "javascript",
        lineNumbers: true,
        highlightDifferences: true,
        lineWiseCopyCut: true,
        styleActiveLine: true,
      },
      onReady(cm: any) {
        const cminstance: Editor = cm;
        console.log(cminstance.getValue());
      },
      onScroll(cm: any) {
        console.log(cm);
      },
    };
  },
});
</script>
<style lang="less" scoped>
:deep(.cm-component) {
  font-size: 13px;
  font-family: Menlo !important;
  .CodeMirror {
    font-family: Menlo !important;
  }
}
</style>

[qzd1989]

谢谢.