Question

在观看了一位着名的python程序员的Sublime3截屏后，我发现用精美字体显示代码评论是一个好主意，让评论更加清晰，让评论阅读更加愉快。一个例子如下：

在此演示中，代码注释以浅色手写字体显示，使其更容易与实际代码区分开来，并且保持评论的乐趣：同时。

我浏览了https://code.visualstudio.com/docs/getstarted/，但似乎无法找到更改代码注释字体的设置。

所以我想知道如何设置另一种字体以便对普通代码字体进行评论。

Answer 1

下载字体 https://www.dafontfree.net/freefonts-script12-bt-f141942.htm

安装软件包 https://github.com/be5invis/vscode-custom-css

创建新的CSS文件 sudo nano ~/.vscode/vs-code-styles.css

复制CSS

/* Set italics and comments to the script font */
.mtk3, .mtk4 {
    font-family: 'Script12 BT';
    font-size: 1.2em;
    font-style: normal;
    color: #57a649!important;
}
.comment {
  font-family: 'Script12 BT';
  font-style: italic;
  font-size: 1.2em;
  color: #57a649!important;
}
.comment:not(.punctuation) {
    font-family: 'Script12 BT';
    font-size: 1.5em;
    color: #57a649!important;
}

代码>首选项>用户设置

// Somewhere in your user / workspace settings file !

.
.
.
.

"vscode_custom_css.imports": ["file:///<PATH TO CSS FILE>/.vscode/vs-code-styles.css"],
"vscode_custom_css.policy": true,
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "comment",
            "settings": {
                "fontStyle": "italic"
            }
        }
    ]
}

来源：https://gist.github.com/psgganesh/d0815ece4b19ce24dde98e21d55f53f5

Answer 2

似乎他们使用的是一种字体，即Operator（运营商），其字体为斜体https://www.typography.com/fonts/operator/styles/。

另请参见此答案，以了解更新的斜体方法https://stackoverflow.com/a/46278282/2475917。

Answer 3

是的，您可以更改用于注释的字体，但是对于看起来如此简单的东西来说，它的作用很长，结果也不是100％完美。例如，当您写注释时，您可能会发现光标离结果文本稍远。如果可以接受，请执行以下过程。

这是我的设置，只是为了证明它可以完成：

您将执行以下操作：

创建一个全局自定义样式表，以更改所有项目的注释外观。
在VS Code的settings.json
安装一个插件，以确保VS Code注册您的自定义样式。

创建样式表

这部分需要转到VS Code安装的根目录。我在Mac上，因此在PC上，您需要确定自己的路径。

在Mac上对于我来说是Users/username/.vscode/

导航到终端中的该目录，然后touch style.css创建样式表。

制作完样式表后，您将要添加字体规则。但是首先，您需要知道要定位的类。要确定类，请在VS Code中打开“开发工具”。然后将鼠标悬停在评论上以查看课程。我的是.mtk3，但我听说这些更新会有所不同，所以最好自己检查一下。

好，现在添加样式，例如

.mtk3 {
   font-family: "iosevka";
   font-size: 1em;
   font-style: italic;
}

链接到样式表

现在，我们需要确保VS Code知道样式表。因此打开settings.json。（您要使用具有该名称的全局文件，而不要使用单个项目中的任何本地文件。）打开此文件后，添加以下条目：

"vscode_custom_css.imports": ["file:///Users/username/.vscode/style.css"],

请注意，您正在为文件指定JSON数组，而不是单个值。显然，路径应该是您自己的。请记住，这实际上是一个链接引用，而不是文件路径，因此您可能需要在路径前加上Windows的file://。

安装插件

此静止不足以使样式起作用。您需要能够在编辑器中运行命令update custom css and js，但这不是默认设置。因此，安装以下插件：Custom CSS and JS Loader。

安装后，您可以Cmd+Shift+P并输入“启用自定义CSS和JS”。出现选项，选择它。现在，重新启动VS Code，或运行reload window，您应该使用漂亮的注释字体。

正如我说的那样，游标的行为有点不规律，但是它并没有太分散注意力，因为与代码相比，您写的注释不多。可能我需要定位更多mtk类。如果他们知道原因，也许有人可以在评论中对此进行详细说明。

Answer 4

我遇到了同样的问题，您似乎只能将注释设为斜体，但不能更改为单独的字体。我最终将我喜欢的常规字体和斜体字体组合到一个有效的字体系列中。

下载字体编辑器 (FontForge) 并通过将您喜欢的常规字体更改为 Custom Font Regular.ttf 和您喜欢的斜体字体来创建您自己的字体系列（例如：自定义字体）自定义字体斜体.ttf。保持姓氏不变。

FontForge 示例：

在 FontForge 中单独打开您想要的字体。
从 Element -> Font Info 只需更改
1. "Fontname" : CustomFont-Regular, CustomFont-Italic
2. “姓氏”：自定义字体（两者保持相同）
3. “人类名字”：自定义字体常规，自定义字体斜体
4. 不要触摸其他任何东西，然后点击“确定”。
5. 如果/当它要求更改 ID 时接受
6. 文件 -> 生成字体为真实类型
7. 安装新命名的 ttf 字体
8. 然后将您的新系列添加到 vs 代码中。（如果您正在关注“自定义字体”）

非常简单，在 VS Code 中效果很好。希望这对某人有帮助

如何更改visual studio代码中的注释字体？

4 个答案:

创建样式表

链接到样式表

安装插件