更改 vuetify 中的默认字体答案

【问题标题】：Change default font in vuetify更改 vuetify 中的默认字体
【发布时间】：2018-01-17 19:51:56
【问题描述】：

我不知道如何更改 vuetify 中的默认字体。我一直在 ./node_modules/vuetify 中寻找正确的变量，但找不到。

理想情况下，我不会对模块进行任何更改，而是从模块外部覆盖这些变量。

【问题讨论】：

【解决方案1】：

最好的方法

定义（如果你使用谷歌字体）

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

对于vuetify 2+

.v-application {
   font-family: $body-font-family, sans-serif !important;
    .title { // To pin point specific classes of some components
       font-family: $title-font, sans-serif !important;
    }
 }

在 app.vue 或单独的 scss/css 文件中直接导入 app.vue

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

.application {
  font-family: "Font Family Name";
}
.headline,
.title,
.subheading{
     font-family: $body-font-family !important;
}

例如，如果您使用的是 google 字体，您的 script 标签应该是这样的

<style lang="scss">
@import url("https://fonts.googleapis.com/css?family=Questrial");

.application {
  font-family: "Questrial";
}
</style>

2021 年更新

在您的main.scss 文件中，

$font-family:'Ubuntu'

.v-application {
  [class*='text-'] {
    color: #36405a;
    font-family: $font-family, sans-serif !important;
  }
  font-family: $font-family, sans-serif !important;
}

【讨论】：

我正在使用 vuetify 2.x，我使用了推荐的方法，在 .headline 上不起作用？
那是因为这些类通常定义了不同的字体（一种显示字体，使它看起来有点不同）。我也更新了答案以引用它们。
@RaviAnand .headline 在 2.x 中已弃用

【解决方案2】：

最简单的方法是简单地将字体系列设置为body。如果您使用 webpack 并导入 Vuetify stylus 条目 main.styl，您可以简单地用您想要的任何字体覆盖 $font-family 变量。

【讨论】：

谢谢。这为我指明了正确的方向。我发现我需要覆盖的变量的名称是$body-font-family。
顺便说一句，与 vuetify 合作真的很棒。我喜欢如何轻松快速地启动并运行一个有吸引力且功能强大的用户界面。使用 pug/jade 会更有趣。我也开始支持 Patreon。希望它继续变得更好。
所有可以更改的可用变量都可以在这里找到：github.com/vuetifyjs/vuetify/blob/master/src/stylus/settings/…
只是为了更新 @adelriosantiago 的链接，截至 2018 年 11 月为 github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/…
只是为了更新@sab 的链接，它是github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/…

【解决方案3】：

使用 Nuxt.js 和 Vuetify Module 对我有用的只是在 variables.scss 中设置正文字体，如下所示：

$body-font-family: SofiaPro, Roboto;

所有其他字体都是从这个派生而来的。

默认变量文件 ('~vuetify/src/styles/styles.sass') 会在之后自动导入，如果变量已经设置则忽略它（感谢 !default）。因此不再需要更改 $heading-font-family 和单独的 $headings。

为了让 Nuxt 模块工作，不要忘记在 nuxt.config.js 文件中设置 treeShake: true 。如果你没有使用 Nuxt.js，那么可能你需要在设置正文字体之后导入变量文件。

这是我的 nuxt.config.js 文件片段的示例：

buildModules: [
  '@nuxtjs/vuetify'
],

vuetify: {
  treeShake: true,
  customVariables: ['~/assets/variables.scss'],
  ... other Vuetify options
}

viariables.scss 包含上述字体定义。

我写了一篇简短的文章来解释这个主题，包含一个完整的代码示例：https://medium.com/@jareklipski/changing-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10

【讨论】：

我试过了，但没有任何结果。有没有 nuxt.confing 的例子？我正在使用最新的@nuxtjs/vuetify
@PavelLevin 我更新了描述，添加了一个相关的 nuxt.config.js 片段。让我知道它是否适合您，如果不适合，请分享您的配置。
添加@nuxtjs/style-resources、node-sass 和sass-loader 时，treeShake 停止工作。这很奇怪。 github.com/pl-ekleft/nuxt-vuetify-font
奇怪。不幸的是，我无法帮助您，因为我没有使用这些特定的库。我建议调试，联系他们的作者或 Vuetify 作者。
node-sass 和 sass-loader 中的问题。与 vuetify 冲突。这已经在 nuxt 中了 :)

【解决方案4】：

我注意到，至少在最新版本的 Vuetify 中，您需要同时指定 $body-font-family 和 $heading-font-family 才能将所有字体从 Roboto 更改为覆盖中的其他字体（在 these instructions 之后）。重新定义$headings 似乎是必要的，因为它在_variables.styl 中定义并依赖于$heading-font-family。请注意，Vuetify 在 2.0 中将是 moving to SCSS，因此届时会有一个新进程。

$body-font-family = 'Barlow Condensed', sans-serif
$heading-font-family = 'Barlow Condensed', sans-serif
$headings = {
  h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em, font-family: $heading-font-family },
  h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em, font-family: $heading-font-family },
  h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal, font-family: $heading-font-family },
  h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal, font-family: $heading-font-family },
  h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal, font-family: $heading-font-family },
  h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em, font-family: $heading-font-family },
  subheading: { size: 16px, weight: 400 },
  body-2: { size: 14px, weight: 500 },
  body-1: { size: 14px, weight: 400 },
  caption: { size: 12px, weight: 400 },
  button: { size: 14px, weight: 500 }
}

【讨论】：

我想为标题设置不同的字体。我已经按照您的建议做了，但无论我尝试什么，它似乎都不想覆盖$heading-font-family。我所有的标题仍然具有为$body-font-family 设置的任何字体。
想通了。 奇怪的是，font-family 不适用于 h* 元素，除非您应用 heading classes 之一，例如.headline 或 .display-1。这不直观。

【解决方案5】：

所以 vuetify 提供了一个非常简单的解决方案。

在您的 src 目录中创建一个sass、scss 或styles 目录，然后在其中创建一个名为variables.scss 或variables.sass 的文件。

当你运行 yarn serve 或 npm run serve 时，vuetify 会自动将全局 Vuetify 变量提升到所有 sass/scss 文件。

示例 - src/scss/variables.scss

以下代码将更改默认正文字体

@import url('https://fonts.googleapis.com/css2family=Poppins:wght@400;700&display=swap');
$body-font-family: 'Poppins', sans-serif;

如果上面的方法不适合你，你可以改变更多的东西，也可以改变 webpack 设置 - check this link

希望对你有帮助！

【讨论】：

您不应在 variables.scss 文件中导入字体。因为如果你在 variables.scss 文件中导入字体，每次编译时都会导入，系统会变得很慢。无需将其导入 variables.scss 文件，您只需将字体导入 index.html 文件并将这部分 $body-font-family: 'Poppins', sans-serif; 添加到 variables.scss 文件中即可。

【解决方案6】：

我不能保证这是“最佳做法”。但考虑到没有关于如何正确执行此操作的文档，我将告诉您我是如何完成此操作的。

我使用的是 Nuxt webpack 模板，所以我的文件结构可能与你的有点不同，但概念是一样的。

我有一个静态资产文件夹。在该文件夹中，我有一个全局 css 文件。我下载了我正在使用的字体作为文件并将其添加到我的静态目录中。但你几乎可以把它放在任何地方。

这是我添加到全局 CSS 文件中的代码：

@font-face{
            font-family: **any name you want to give the font**;
            src: url(**location in directory**) format("opentype");
            }

然后您只需像往常一样将其添加到样式规则中

    *{
    font-family: **the same name you gave it above**;
 }
   h1{
    font-family: **the same name you gave it above**;
 }

等等……

记得输入正确的格式。如果您的文件以 .otf 格式下载，则它是 opentype。如果是 .ttf 则为 truetype。

我还没有弄清楚如何包含来自 CDN 的字体。如果我弄清楚了，我会告诉你的。

【讨论】：

这是我第一次解决它的方法（我也在使用 Nuxt）。但我现在改写了 main.styl 文件中的 $body-font-family 变量。
您可以以完全相同的方式使用 CDN 中的字体。只需将您的 src: url() 指向字体的 CDN 位置。见这里：fonts.googleapis.com/css?family=Racing+Sans+One

【解决方案7】：

对于 Laravel Vuetify 用户，这就是你所需要的：更新你的 webpack.min.js 文件，如下所示：

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/main.scss', 'public/css')
   .stylus('resources/stylus/main.styl', 'public/css');

您的main.styl 应位于以下路径中：resources\stylus\main.styl 您的 main.styl 文件应如下所示：

@import url("https://fonts.googleapis.com/css?family=Literata:400,500,600,700&display=swap");

$body-font-family = 'Literata', serif
$alert-font-size = 18px

@import '~vuetify/src/stylus/main'
// For a-la-carte
@import '~vuetify/src/stylus/app'

要防止 Vuetify 编写可能覆盖您的 main.css 的内联样式，请执行以下操作：

 mix.options({
      extractVueStyles: true, // Extract .vue component styling to file, rather than inline.
      });

最后，确保 stylus-loader 已经设置，如果没有在命令行中运行：

$ yarn add stylus stylus-loader style-loader css-loader -D
// OR
$ npm i stylus stylus-loader style-loader css-loader --save-dev

你也可以 npm install material-design-icons-iconfont。

npm install material-design-icons-iconfont --save

【讨论】：

【解决方案8】：

此解决方案适用于 Vue-CLI>=3

首先你必须安装 sass-loader

npm install sass sass-loader fibers deepmerge -D

你应该先在“src”目录下创建“sass”文件夹，然后在这个目录中创建一个“variables.scss”文件。

然后在这个文件中写入下面的代码。

$ body-font-family: Your-FontName
@import '~vuetify/src/styles/settings/_variables.scss';

您现在需要重新启动您的项目。

【讨论】：

【解决方案9】：

如果您使用的是 Vuetify 2+，则该过程将与 jeffbaumes 的答案非常相似，但使用 Sass 而不是 Stylus

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

$body-font-family: 'My Custom Font', cursive;

$heading-font-family: $body-font-family, cursive;

@each $heading, $style in $headings {
    $headings: map-merge($headings, ($heading: map-merge($style, ('font-family': $heading-font-family))));
}

或者您可以更改某些标题样式的字体，而不是像这样更改其他样式：

$headings: map-merge($headings, ('h3': ('font-family': 'Custom Font Name')));

【讨论】：

不适合我 =( @each $heading, $style in $headings { ^ 未定义变量。
确保在 src/sass/main.scss 的顶部导入原始的 Vuetify sass 文件，如下所示：@import '~vuetify/src/styles/styles.sass';

【解决方案10】：

不幸的是，@alice-mx 的答案对我不起作用（无法从 node_modules 导入）。

这就是我在代码中解决这个问题的方法（使用 Vuetify 2）：

下载想要的 .woff2 文件并放到 src/assets/fonts 后，我将此代码添加到我的 App.vue 文件（或您在项目中设置的任何主 vue 文件）：

// App.vue
<style>
$typoOptions: display-4 display-3 display-2 display-1 headline title subtitle-1 subtitle-2 body-1 body-2 caption overline; // all md typography options provided by vuetify

%font-choice {
  font-family: "Noto Sans", sans-serif !important;
}

@mixin md-typography {
@each $typoOption in $typoOptions {
  .#{$typoOption} {
    @extend %font-choice;
  }
}

.v-application { // This is where we'll add all the md-typography classes
  font-size: 12px;
  @extend %font-choice;
  @include md-typography;
}

// add font-face because in this case Noto-Sans is taken from Google fonts
@font-face {
  font-family: "Noto Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans"), local("NotoSans"),
    url("~@/assets/fonts/noto-sans-v9-latin-regular.woff2") format("woff2");
}
</style>

我希望这会有所帮助！

这个answer 帮助我形成了.scss 代码

【讨论】：

'@Tzahi Leh' 我听从了你的建议，但我看到部分更改了自定义字体。你能帮我看看我错过了什么吗？我创建了一个新帖子here。
@mmar，你找到解决方案了吗？
'@Tzahi Leh' 不，我不能。我仍然看到部分改变了主题。

【解决方案11】：

我在（最新）Nuxt 中的解决方案：

nuxt.config：

head: {
.......
link: [
  {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
  {
    rel: 'stylesheet',
    href:'https://fonts.googleapis.com/css?family=Raleway:400|Roboto+Slab:200&display=swap'
  }
]
},

vuetify: {
treeShake: true,
customVariables: ['~/assets/variables.scss'],

theme: {
  .....
  },
}
},

变量.scss

$body-font-family: Raleway, sans-serif;
$heading-font-family: Roboto Slab, serif;

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

【讨论】：

【解决方案12】：

我正在使用 webpack，唯一能让它工作的方法是：

// webpack.config.js

...
{
  test: /\.sass$/,
  use: [
    {
      loader: 'sass-loader',
      // Vuetify
      // Requires sass-loader@^9.0.0
      options: {
        implementation: sass,
        sassOptions: { fiber: fibers },
        additionalData: "@import '~/src/styles/variables.scss'",
      }
    }
  ]
}
...

// src/styles/variables.scss

@import "~vuetify/src/styles/settings/_variables.scss";

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
$body-font-family: 'Fredoka One', cursive;
$heading-font-family: $body-font-family;
$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,
    ),
);

【讨论】：

【解决方案13】：

我是如何实现的：（Vuetify 2+）

1) 在你的 index.html 中，导入你的字体。

<link rel="stylesheet" href="<%= BASE_URL %>fonts/<MY_CUSTOM_FONT>/fontface.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Literata:100,300,400,500,700,900">

2) 在/src内部，创建一个styles目录和一个名为variables.scss的文件

3) 在该文件中，覆盖一些变量值：

// Globals
$body-font-family: 'MY_CUSTOM_FONT'; // Used on content
$heading-font-family: 'Literata';    // Used on helpers classes

希望它对某人有所帮助。

参考：
https://github.com/vuetifyjs/vuetify/issues/8169
https://vuetifyjs.com/en/customization/sass-variables#example-variable-file

【讨论】：

【解决方案14】：

通过 CDN/npm 安装您的字体。然后通过在 ./src/styles/variables.scss

中添加这一行来覆盖这个变量

//Change default font to 'Inter'
$body-font-family: "Inter" !important;

一个简短的方法。

【讨论】：

【解决方案15】：

这是一个迟到的回复，但是，您可以添加常见的 scss/sass/less 文件（在 App.vue 或您的主 App 文件中调用）它将在整个应用程序中实现它

.body,
.v-application{
    font-family: 'Antic', sans-serif;
}

【讨论】：

【解决方案16】：

我尝试了一切在我的情况下没有任何效果，但是下面的解决方案肯定会有效，尽管不是最好的解决方案

在您的 variables.scss 中添加以下 scss

$body-font-family: "Open Sans",sans-serif;

.v-application {
  .text-h1,
  .text-h2,
  .text-h3,
  .text-h4,
  .text-h5,
  .text-h6,
  .text-headline,
  .text-title,
  .text-subtitle-1,
  .text-subtitle-2,
  .text-body-1,
  .text-body-2,
  .text-button,
  .text-caption,
  .text-overline {
    font-family: $body-font-family !important;
  }
}

【讨论】：

【解决方案17】：

有一种比上述所有方法更简单、更正确的方法。添加

treeShake: true,
defaultAssets: {
  font: {
    family: 'Poppins'
  }
}

到 nuxt.config.js 中的 vuetify 对象。这应该会在整个应用程序中正确启用您的字体系列。（有关更多详细信息，请参阅defaultAssets 文档，并注意需要 treeShake 选项）

【讨论】：

【解决方案18】：

Vuetify v2.4.11

Vue v2.6.12

要在 Vuetify 中配置自定义字体，您需要在 App.vue 组件中包含此 CSS。

<style lang="scss">
  @import url('https://fonts.googleapis.com/css2?family=New+Tegomin&display=swap');
  $font-family: 'New Tegomin', serif;
  .my-application {
    .headline,
    [class*='display-'],
    [class*='text-'] {
      color: #36405a;
      font-family: $font-family, sans-serif !important;
    }
    font-family: $font-family, sans-serif !important;
  }
</style>

在您的节点中放置一个特定的类，类似这样：

<v-app class="my-application">

第二点很重要，因为 Vuetify 的所有字体样式都有!important，如果你想覆盖，你需要多放一个类...

希望这篇小贴士对大家有所帮助！

【讨论】：

【解决方案19】：

额外的帮助：

当将字体从 Roboto 更改为任何其他字体时，默认情况下 vuetify 仍会在“head”标签中导入 cdn Roboto 字体文件（url）。为了避免这种额外的事情，请使用 vuetify 设置下的“defaultAssets: false”选项。

已编辑
那个东西只在 NUXTJS 中有效，感谢@nlavr 指出来

【讨论】：

在 Vuetify 中没有选项 'defaultAssets: false'，至少在 2.5 版本中。