Question

如何将Vuetify中所有项目的字体从Roboto更改为另一个字体。

我使用Vuetify，它是默认的Roboto字体。我想将其更改为另一个。更改variables.scss文件中的字体无济于事，因为每个类都有特定的Roboto字体。

@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';
$heading-font-family: 'Oxygen';

但是，当我使用这样的类时：

class = "text-md-h6 text-lg-h6 .text-xl-caption"

仍然使用Roboto字体。

@media (min-width: 1024px)
<style>
.v-application .text-xl-caption {
    font-size: 0.75rem !important;
    font-weight: 400;
    line-height: 1.25rem;
    letter-spacing: 0.0333333333em !important;
    font-family: "Roboto", sans-serif !important;
}

我该怎么做才能在所有位置更改字体？

Answer 1

在大多数情况下使用!important是一种不好的做法，不幸的是，因为这些font-family样式也具有!important，CSS只会将样式与更具体的选择器一起使用，因此您也必须使用!important。您可以尝试使用.v-application .v-application--wrap *之类的!important之类的东西。就像：

.v-application .v-application--wrap * {
font-family: $body-font-family !important;
}

，如果您对不同的类使用不同的样式，则可以将它们全部放在.v-application .v-application--wrap { }中，然后sass会为您处理它们。 但还要注意，其他vuetify类可能会使用更特定的选择器，因此在这些情况下，您必须针对这些特定情况使用更特定的选择器。

Answer 2

这应该通过将variables.scss文件中的字体变量设置为documented here来起作用。要检查一下是否无效的几件事：

文件应位于预期的文件夹src / [sass，scss或样式]中。 Docs。
Vuetify Loader应该与sass和sass-loader一起安装为dev依赖项
变量文件only contains variables，而不是导入文件。字体可以在main或其他地方声明/导入。

如何将Vuetify中所有项目的字体从Roboto更改为另一个

2 个答案: