在Vuetify上更改标题默认字体

Question

我刚刚升级到Vuetify 2.0，我的字体完全坏了。我已经成功地通过以下方式更改了项目中的字体：

.v-application {
    font-family: 'Montserrat', sans-serif!important;
}

但应用了.display-1、.display-2等类的标题仍然采用Vuetify默认样式(Roboto)，因为它在Vuetify默认样式中具有！重要性。

如何更改整个项目的字体，覆盖Vuetify的默认字体？

Answer 1

您可以在全局h1文件中按以下方式更改特定类型的字体(如h2和css )的默认字体，特别是font-family属性：

$headings: (
    'h1': (
        'font-family': 'Calibri',
        'size': 60px,
        'line-height': 60px,
        'weight': 400
    ),
    'h2': (
        'font': 'Ariel',
        'size': 48px,
        'line-height': 48px,
        'weight': 400
    ),
)

然后，您可以以实例化的方式给出这些实用程序类，如class="text-h1"或class="text-h2"

您可以在Vuetify中执行相同的操作，以覆盖以下内置(并通过API进行修改)实用程序类：

• h3
• h4
• h5
• h6
• body-1
• body-2
• subtitle-1
• subtitle-2
• button
• caption
• overline

如果您需要任何其他实用程序类，例如，派生自内部设计系统实用程序类，您可以将它们添加到全局scss/css文件中，我建议您这样做，同时保持Vuetify命名约定。

例如，如果您需要一个body-3或subtitle-3，您可以像这样添加它们

.text-body-3 {
    // your custom style
}

.text-subtitle-3 {
    // your custom style
}

Answer 2

在Vuetify 2.x中，你可以在你的variables.scss文件中自定义scss变量。您可能需要设置$body-font-family和$heading-font-family变量。在here文档中有很多变量，在Vutify2.3版本中也有很多变化。

举个例子：

$font-size-root: 18px;
$body-font-family: 'Roboto', sans-serif;
$heading-font-family: 'Libre Caslon Text', serif;
$btn-text-transform: none;

有关替代特定样式的其他信息：

通过将$headings添加到同一文件中，可以进一步覆盖单个样式，例如text-h1。

$headings: (
      'h1': (
      'size': 4.0rem,
      'weight': 400,
      'line-height': 4.444rem,
      'letter-spacing': 1em,
      'text-transform': false
    )
)

typography文档中列出了您可以自定义的有效值。目前包括：

• h1
• h2
• h3
• h4
• h5
• h6
• subtitle-1
• subtitle-2
• body-1
• body-2
• button
• caption
• overline

这些都会生成text-X类。例如：text-body-2

同样重要的是要注意，即使您覆盖了这些样式，也不会更改同名(如h1)元素的类型设置。相反，您需要使用class="text-h1". 应用该样式在文档中很容易遗漏这一点。

右图：<h1 class="text-h1">my header</h1>

错误：<h1>my header</h1>

另外，如果你还没有使用2.3，那么它们的名字是不同的。如果你关注github的问题，就会发现围绕排版发生了很多变化，导致了目前的系统。