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

Question

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

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

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

我在做什么错了？

Answer 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中添加任何内容，因为扩展名已经可以访问其自己的安装目录。