Question

我尝试使用本地ttf文件向Vuetify添加自定义字体，要添加它，我尝试了@ font-face，但是编译器在查找与@import一起工作的文件时遇到了问题，但是字体不在线：C 这是我的variable.scss文件

@font-face {
    font-family: "MyFont";
    src: url("assets/font/myfont.ttf");
}

$body-font-family:  'MyFont', sans-serif;

这是错误

./assets/font/MyFont.ttf in ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VAlert/VAlert.sass, ./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/components/VApp/VApp.sass and 91 others

查找字体似乎是一个问题，但是我不能简单地将ttf文件放在节点模块目录中：C

Answer 1

我通过根据LinusBorg here在我的字体路径前添加~@来解决此问题，现在它可以正常工作。您的应该是~@/assets/myfont.ttf。

如何将ttf字体本地文件导入Vuetify变量？

1 个答案: