VuetifyJS 中的默认字体部分更改 [英] Default font is partially changed in VuetifyJS

问题描述

我使用的是 Vuetify 2.0.14.我已经关注了这篇文章

我注意到带有 display-4 display-3 display-2 display-1 标题标题副标题 1 副标题 2 body-1 body-2 标题上划线 的样式不适合/使用自定义样式字体.

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

解决方案

最佳方式

定义(如果你使用谷歌字体)

@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: '氧气';$title-font: 'Comfortaa';

对于 vuetify 2+

.v-application {font-family: $body-font-family, sans-serif !important;.title {//指出某些组件的特定类font-family: $title-font, sans-serif !important;}}

请注意 .title 的单独声明，因为它们通常被赋予不同的字体(显示字体)，.heading 和 也是如此.副标题.

在您的 app.vue 或直接导入 app.vue 的单独 scss/css 文件中写入此内容.

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

.application {font-family: "字体家族名称";}.标题，.标题，.副标题{字体系列:$body-font-family ！重要；}

例如，如果您使用的是谷歌字体，您的脚本标签应该如下所示