覆盖标题字体 Vuetify + Nuxt答案

【问题标题】：Override heading font Vuetify + Nuxt覆盖标题字体 Vuetify + Nuxt
【发布时间】：2021-09-19 08:52:58
【问题描述】：

我正在尝试更改 Vuetify + Nuxt 设置中标题标签的默认字体。我已经检查了this question，但这不适用于 Nuxt 在我的 assests/variables.scss 中：

// Ref: https://github.com/nuxt-community/vuetify-module#customvariables
//
// The variables you want to modify
// $font-size-root: 20px;
@import '@fontsource/ledger/latin.css';
@import '@fontsource/raleway/latin.css';


$font-size-root: 16px;
$body-font-family: Raleway, Helvetica, sans-serif;
$heading-font-family: serif !important;


$headings: (
    'h1': (
        'font-family': $heading-font-family,
    ),
    'h2': (
        'font-family': $heading-font-family,
    ),
    'h3': (
        'font-family': $heading-font-family,
    ),
    'h4': (
        'font-family': $heading-font-family,
    ),
    'h5': (
        'font-family': $heading-font-family,
    ),
    'h6': (
        'font-family': $heading-font-family,
    ),
);


@import '~vuetify/src/styles/styles.sass';

但我的标题字体仍然是 Raleway。当我检查 h1 标签时，我看到了这个：

在docs 中，它们显示标题使用的值：

还有什么我需要重写的吗？

【问题讨论】：

标签： sass nuxt.js vuetify.js

【解决方案1】：

将字体系列名称应用于您要设置样式的变量，然后将 install the font 应用于您想要的并从 node_modules 导入或通过 URL 导入。

assets/variables.scss

 $font-size-root: 16px;
    
    $heading-font-family: "Roboto", sans-serif;
    $body-font-family: "Roboto", sans-serif;
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: $heading-font-family;
    }
    
    @import "@fontsource/roboto/latin.css";
    @import "~vuetify/src/styles/styles.sass"; //this has to be last

【讨论】：