Question

我刚升级到Vuetify 2.0，我的字体完全坏了。我设法通过以下方式更改了项目上的字体：

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

但是应用了.display-1，.display-2等类的标题仍采用Vuetify默认设置（Roboto），因为它在Vuetify默认样式中具有！important。

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

Answer 1

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

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

而且您可以像这样以 Vuetify 的方式提供这些实用程序类 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 中记录了很多变量，并且在 Vuetify 2.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
按钮
标题
上划线

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

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

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

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

此外，如果您尚未使用 2.3，则名称会有所不同。如果您关注 github 问题，那么当前系统的排版已经发生了很多变化。

在Vuetify

2 个答案: