更改 vuetify 中的默认字体

Question

我不知道如何更改 vuetify 中的默认字体。我一直在 ./node_modules/vuetify 中寻找正确的变量，但我找不到它。

理想情况下，我不会对模块进行任何更改，而是宁愿从模块外部覆盖这些变量。

原文由 ba_ul 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

最简单的方法是简单地将字体系列设置为 body 。如果您使用 webpack 并导入 Vuetify stylus 条目 main.styl ，您可以简单地用您想要的任何字体覆盖 $font-family 变量。

原文由 John Leider 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

最好的办法

定义（如果你使用谷歌字体）

 @import url('https://fonts.googleapis.com/css? family=Oxygen:300,400,700&display=swap');
@import url('https://fonts.googleapis.com/css? family=Comfortaa&display=swap');

$body-font-family: 'Oxygen';
$title-font: 'Comfortaa';

对于 vuetify 2+

 .v-application {
   font-family: $body-font-family, sans-serif !important;
    .title { // To pin point specific classes of some components
       font-family: $title-font, sans-serif !important;
    }
 }

在 app.vue 或单独的 scss/css 文件中直接导入 app.vue

对于 vuetify 1.5.x 在你的 app.vue 脚本中添加

.application {
  font-family: "Font Family Name";
}
.headline,
.title,
.subheading{
     font-family: $body-font-family !important;
}

例如，如果您使用的是 google 字体，您的 script 标签应该如下所示

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");

.application {
  font-family: "Questrial";
}
</style>

2021 年更新

在您的 main.scss 文件中，

 $font-family:'Ubuntu'

.v-application {
  [class*='text-'] {
    color: #36405a;
    font-family: $font-family, sans-serif !important;
  }
  font-family: $font-family, sans-serif !important;
}

原文由 Bhaskar 发布，翻译遵循 CC BY-SA 4.0 许可协议