如何在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。我可以建议你一些修改字体的想法：

1. 如果您想更改每个text-h4：您可以通过修改text-h4的默认样式来覆盖它($headings'h4'(https://vuetifyjs.com/en/features/sass-variables/#example-可变文件

2. 如果你想保留默认的text-h4：你可以删除text-h4类，并使用你自己的类custom-header和text-h4的复制规则加上你的字体家族规则。你不需要更高的特异性，也不需要使用！重要的类似于：

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

---

以前的答案

给你的元素另一个类别：

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

在css中覆盖这个新类的字体族。

---

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