在 vscode 扩展 webview 中使用本地 .ttf答案

【问题标题】：Using local .ttf in vscode extension webview在 vscode 扩展 webview 中使用本地 .ttf
【发布时间】：2019-04-12 17:15:11
【问题描述】：

我正在尝试将 .ttf 文件加载到我的 vscode 扩展程序的 webview 面板中。但是，我似乎无法理解我应该指向什么网址。我目前的尝试是：

@font-face{
    font-family: myfont;
    src:url("vscode-resource:{fontlocation}")
}
body{
}

然后我将{fontlocation} 替换为__dirname + path.sep + "myfont.ttf" 的结果，也就是myfont.ttf 文件的绝对位置，位于我的扩展文件夹的根目录中。

我做错了什么？

【问题讨论】：

Webviews 需要带有 vscode-resource 的完整文件路径，因此示例 uri 应为：vscode-resource:/Users/matb/fonts/CosmicSands.tff。还要确保生成的路径包含在 webviews 的 localResourceRoots 中。如果仍然无法正常工作，请分享您的扩展源

【解决方案1】：

像往常一样，修复非常愚蠢。问题是我在 Windows 上运行它，而 css 不喜欢默认路径分隔符 (\)。所以一个简单的解决方法是使用__dirname.split(String.fromCharCode(92)).join("/") + "/myfont.ttf"。

进入 css 后，路径应如下所示：

src:url(vscode-resource:C:/Users/me/source/repos/vscodeextension/out/myfont.ttf)

我什至不需要向 webview 的 localRessourceRoots 添加任何内容，因为扩展程序已经可以访问它自己的安装目录。

【讨论】：