摩纳哥编辑器设置字体大小答案

【问题标题】：Monaco editor set font size摩纳哥编辑器设置字体大小
【发布时间】：2018-08-02 16:50:39
【问题描述】：

我正在尝试通过设置周围 div 的样式来设置 monaco 编辑器的字体大小。这种方式行不通。所以我看到摩纳哥编辑器有一个属性字体大小。所以我用这个属性试了一下。不幸的是，这对我也不起作用。最好的方法是使用 CSS 的方法，因为我同时设计了一些东西。

【问题讨论】：

标签： css monaco-editor

【解决方案1】：

有一个 API 用于设置 font-size、font-family 等，尽量不要在 DOM 中进行 Hack，因为将来可能不兼容。

在你的情况下，试试这个：

var editor = monaco.editor.create(document.getElementById("container"), {
    value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
    language: "javascript",
    fontSize: "12px",
    lineNumbers: "off",
    roundedSelection: false,
    scrollBeyondLastLine: false,
    readOnly: false,
    theme: "vs-dark",
});

查看Monaco Editor Playground for Basic Editor Options 并开始输入属性。它将自动完成，您将看到所有可用的配置属性和描述 - 或者转到 api 文档参考。祝你好运

【讨论】：

fontSize 字段是一个数字，而不是字符串。该值被解析为一个数字，并且任何非数字加法都将被忽略。然后将该值设置为px。因此设置例如16pt 最终会变成 16px，这不一样。您可以在操场上查看。
另见github.com/microsoft/monaco-editor/issues/2242

【解决方案2】：

我不确定是否可以使用 CSS 设置编辑器样式。但是，您可以使用fontSize 属性来更改编辑器的字体大小。

monaco.editor.create(document.getElementById("container"), {
    value: "function hello() {\n\talert('Hello world!');\n}",
    language: "javascript",
    fontSize: 20
});

【讨论】：

太好了，戴维。你能在这里分享一下 Juhuy 的解决方案吗？