如何在 vscode 中加载字体？答案

【问题标题】：How do I side-load a font in vscode?如何在 vscode 中加载字体？
【发布时间】：2020-12-18 22:31:44
【问题描述】：

没有管理员权限安装字体，如何在 vscode 中使用未安装的字体？ Visual Studio Code 是基于 Electron 构建的，所以应该可以加载 css 吧？

【问题讨论】：

【解决方案1】：

由于 Visual Studio Code 是基于 Electron 构建的，它能够加载 css，是的。但是修改 vscode 内部文件will cause your title bar to display [Unsupported]。

通过css侧载字体的途径如下：

下载并提取字体。对于这个例子，I'm using Iosevka 因为它已经带有一个现成的样式表。
通过附加以下 sn-p 修改您在 resources/app/out/vs/code/electron-browser/workbench/ 找到的安装的 workbench.js 脚本（使用的路径分隔符不重要；node.js 将处理 / 在 windows 上很好）

const el = document.createElement('style');
el.type = 'text/css';
const content = document.createTextNode(`
@import url('C:/path/to/iosevka.css');
`);
el.appendChild(content);
document.head.appendChild(el);

配置您的 settings.json 以使用该字体

  "fontFamily": "'Iosevka Web', monospace",

重新加载你的编辑器

如果你的字体没有样式表供你加载，你可以在上面的content变量中指定你自己的fontFamily：

@font-face {
    font-family: 'Iosevka Web';
    font-display: swap;
    font-weight: 100;
    font-stretch: normal;
    font-style: normal;
    src: url('woff2/iosevka-thin.woff2') format('woff2'),
        url('woff/iosevka-thin.woff') format('woff'),
        url('ttf/iosevka-thin.ttf') format('truetype');
}

最后一点，可以从 Internet 加载样式表，但为了简单起见，我将这个答案保留在本地文件中。也可以为每个会话运行 sn-p 以避免持久性，但我没有看到这样做的目的，并将其作为练习留给读者。

【讨论】：