如何在Vuetify中使用自定义字体？

Question

我想使用从网上下载的字体用于我的项目。它存储为.ttf文件。

能否请您详细解释？我必须导入吗？如果是，我必须在哪里？以及如何告诉Vuetify使用此字体而不是默认字体？

Answer 1

由于使用的是vue-cli-3，因此可以在sass内创建一个src文件夹，然后在其中添加一个variables.scss文件，然后可以在此文件中导入字体，将其设置为变量$body-font-family的值，类似这样，但使用所需的任何字体：

@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap"); $body-font-family: "Roboto" !important;

此处有更多相关信息：https://vuetifyjs.com/en/customization/sass-variables