Question

我无法弄清楚如何更改vuetify中的默认字体。我一直在寻找./node_modules/vuetify中的正确变量，但我无法找到它。

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

Answer 1

最简单的方法是在body上设置font-family。如果您使用webpack并导入Vuetify手写笔条目main.styl，则只需用您想要的任何字体覆盖$font-family变量。

Answer 2

我注意到，至少在最新版本的Vuetify中，您需要同时指定$body-font-family和$heading-font-family才能将所有内容的字体从Roboto更改为替代中的其他字体（在{{之后3}}）。 $headings的重新定义似乎是必要的，因为它是在_variables.styl中定义的，并且取决于$heading-font-family。请注意，Vuetify在2.0中将为these instructions，因此届时将有一个新流程。

$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 }
}

Answer 3

因此，vuetify提供了一个非常简单的解决方案。

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

运行纱线发球或npm运行发球时，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

希望有帮助！

Answer 4

我正在使用 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,
    ),
);

Answer 5

我在（最新）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: {
  .....
  },
}
},

variables.scss

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

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

Answer 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中加入字体。如果我确实想到这一点，我会告诉你。

Answer 7

我是如何实现的：（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

Answer 8

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

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

Answer 9

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

中添加此行即可覆盖此变量

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

一种简短的方法。

Answer 10

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

$body-font-family: SofiaPro, Roboto;

所有其他字体均源自此字体。

默认变量文件（'〜vuetify / src / styles / styles.sass'）之后会自动导入，并且会忽略已设置的变量（感谢！default）。因此，不再需要更改$ heading-font-family和单个$ heading。

为此要与Nuxt模块一起使用，请不要忘记在nuxt.config.js文件中设置treeShake：true。如果您不使用Nuxt.js，则可能需要在设置正文字体后导入变量文件。

Answer 11

不幸的是，@ 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代码

Answer 12

如果您使用的是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')));

Answer 13

更好的方式，在您的app.vue脚本中添加

.application {
  font-family: "Font Family Name";
}

例如，如果您使用的是Google字体，则您的脚本标签应类似于

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

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

Answer 14

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

首先必须安装sass-loader

boolean var1_b;   
boolean var2_b;

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

然后在该文件中编写以下代码。

npm install sass sass-loader fibers deepmerge -D

您需要立即重新启动项目。

Answer 15

对于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.
      });

最后，如果没有在命令行中运行，请确保手写笔加载器已经设置：

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

您也可以npm安装material-design-icons-iconfont。

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

Answer 16

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

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

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

Answer 17

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

在你的 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;
  }
}

Answer 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，如果你想覆盖，你需要添加一个额外的类...

希望这个技巧对大家有帮助！

Answer 19

额外有用的东西：

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

Answer 20

材料设计指南

Link here

更改vuetify中的默认字体

20 个答案:

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