VuetifyJS中的默认字体已部分更改

Question

我使用的是Vuetify 2.0.14。我在Change Default Font in Vuetify上关注了这篇文章，并从@tzahi leh获取了解决方案。但是我看到网页被我的自定义字体部分改变了。我知道Vuetify有默认的Roboto字体，我想改成'Ubunut‘。我还下载了Ubuntu字体系列并将其放在assets/fonts文件夹中。

我的App.vue Style Content

<style lang="scss" scoped>
$typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline;

%font-choice {
  font-family: "Ubuntu", sans-serif !important;
}

@mixin md-typography {
  @each $typoOption in $typoOptions {
    .#{$typoOption} {
      @extend %font-choice;
    }
  }
}

.v-application {
  // font-size: 12px;
  @extend %font-choice;
  @include md-typography;
}

@font-face {
  font-family: "Ubuntu";
  font-style: normal;
  font-weight: 400;
  src: local("Ubuntu"), local("Ubuntu"),
  url("~@/assets/fonts/Ubuntu-R.ttf") format("ttf");
}
</style>

输出页面看起来像bwlow。红色突出显示仍然显示为Roboto字体样式，而其他字体则更改为Ubuntu字体样式。

​

​

我注意到display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline的样式与自定义样式字体的行为不同。

有关于如何在整个网站上完全更改为我的自定义字体的帮助吗？请

Answer 1

最佳方式

定义(如果使用google字体)

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

用于证明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;
    }
 }

请注意，由于.title .heading .subheading**.**和.heading通常使用不同的字体(显示字体)，因此和and的声明是不同的

将其写入您的app.vue或直接导入到app.vue的单独的scss/css文件中。

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

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

例如，如果您使用的是google字体，则脚本标记应如下所示

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

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

Answer 2

从<style lang="scss" scoped>中删除scoped

Answer 3

在找了很长时间后，我找到了答案。

首先，你需要导入vuetify sass设置：

@import '~vuetify/src/styles/styles';

并将$body-font-family变量更改为您的字体系列

$body-font-family: Montserrat, sans-serif;

然后覆盖字体设置，如文档中的：Sass Variables

$headings: map-deep-set($headings, 'h1' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h2' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h3' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h4' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h5' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'h6' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'subtitle-1' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'subtitle-2' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'body-1' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'body-2' 'font-family', $body-font-family);
$headings: map-deep-set($headings, 'caption' 'font-family', $body-font-family);