更改vuetify中的默认字体

Question

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

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

Answer 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;
}

例如，如果您使用的是谷歌字体，您的脚本标签应该如下所示

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

Answer 2

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

Answer 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/changed-default-font-in-vuetify-js-and-nuxt-js-3894e726ff10

Answer 4

我注意到,至少在Vuetify的最新版本中,您需要指定两者$body-font-family并将$heading-font-family更改内容的字体从Roboto更改为覆盖中的其他内容(遵循这些说明).重新定义$headings似乎是必要的,因为它的定义_variables.styl和依赖$heading-font-family.请注意,Vuetify将在2.0中转移到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 }
}

Answer 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 设置 -检查这个链接

希望能帮助到你！