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

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

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

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

Answer 2

在大多数情况下使用!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 类可能会使用更具体的选择器，因此在这些情况下，您必须针对这些特定情况使用更具体的选择器。