vue.js - 更改 vuetify 中的默认字体

Question

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

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

Answer 1

最佳方式

定义(如果你使用谷歌字体)

@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;
}

例如，如果您使用的是谷歌字体，您的脚本标签应该如下所示

<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;
}