如何在 Vuetify 中更改字体系列？

Question

默认的 Vuetify 字体系列是 Roboto，我想更改它。我发现了其他可以在全球范围内更改字体系列的解决方案。我不想全局更改它，我只想针对特定元素更改它。如何做到这一点？

<template>
    <v-container>
        <div class="text-h4">Text family I want to change</div>
        <div class="text-h6">Text family I dont want to change/give another font family</div>
    </v-container>
</template>

Answer 1

更新

Vuetify 在 .v-application 上声明了字体，不幸的是还在 .v-application .text-hN 上将字体声明为 !important。我可以建议你一些想法来修改你的字体：

如果你想改变每一个text-h4: 你可以通过修改它的默认值来覆盖text-h4的样式($headings then) 'h4') https://vuetifyjs.com/en/features/sass-variables/#example-variable-file
如果你想保留默认的 text-h4: 你可以删除 text-h4 class 并使用你自己的 class custom-header 复制text-h4 的规则加上你的字体系列规则。您不需要更高的特异性，也不需要使用 !important。类似于：

.custom-header {
    font-size: 2.125rem !important; /* from .text-h4 */
    line-height: 2.5rem; /* from .text-h4 */
    letter-spacing: .0073529412em !important; /* from .text-h4 */
    font-weight: 400; /* from .text-h4 */
    font-family: YOUR_FONT_FAMILY, Roboto, sans-serif;
}

上一个回答

给你的元素另一个 class:

<div class="text-h4 anotherClassForExample">Text family I want to change</div>

覆盖 css 中这个新 class 的字体系列。

我之前也处于类似的位置，我有一些基本的 css 知识并开始使用框架。我强烈建议您在使用 UI 框架之前掌握 CSS。从使用框架开始看起来更快、更闪亮、更容易，但从长远来看并非如此。你会经常被屏蔽，也许以后你会换一个，甚至不想用。

如何在 Vuetify 中更改字体系列？

How to change font-family in Vuetify?

vue.js

vuetify.js