更改 vuetify 中的默认字体
Change default font in vuetify
我不知道如何更改 vuetify 中的默认字体。我一直在 ./node_modules/vuetify 中寻找正确的变量，但找不到。
理想情况下，我不会在模块中进行任何更改，而是宁愿从模块外部覆盖此类变量。
我不能保证这是"best practice"。但考虑到没有关于如何正确执行此操作的文档，我将告诉您我是如何完成此操作的。
我使用的是 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 中包含字体。如果我确实弄清楚了，我会让你知道的。
最简单的方法是简单地在 body 上设置字体系列。如果您正在使用 webpack 并导入 Vuetify stylus 条目 main.styl，您可以简单地用您想要的任何字体覆盖 $font-family 变量。
我注意到，至少在 Vuetify 的最新版本中，您需要同时指定 $body-font-family 和 $heading-font-family 以将所有内容的字体从 Roboto 更改为覆盖中的其他内容（以下these instructions). The redefinition of $headings seems to be necessary since it is defined in _variables.styl and depends on $heading-font-family. Note that Vuetify will be moving to SCSS 在 2.0 中，所以那时会有一个新进程。
$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 }
}
最佳方式
定义（如果您使用 google 字体）
@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 字体，您的脚本标签应该类似于
<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;
}
对于 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
如果您使用的是 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')));
不幸的是，@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 代码
使用 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
此解决方案适用于 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';
您现在需要重新启动您的项目。
我是如何实现的：(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
我在（最新）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';
所以vuetify提供了一个非常简单的解决方案。
在您的 src 目录中创建一个 sass、scss 或 styles 目录，然后在其中创建一个名为 variables.scss 或 variables.sass 的文件。
When you run yarn serve or npm run serve, vuetify will automatically
hoist the global Vuetify variables to all of your sass/scss files.
示例 - 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
希望对您有所帮助！
通过 CDN/npm 安装您的字体。然后通过在 ./src/styles/variables.scss
中添加这一行来覆盖这个变量
//Change default font to 'Inter'
$body-font-family: "Inter" !important;
一个简短的方法。
这是一个迟到的回复，但是，您可以添加公共 scss/sass/less 文件（在 App.vue 或您的主应用程序文件中调用）它将在整个应用程序中实现它
.body,
.v-application{
font-family: 'Antic', sans-serif;
}
有一种方法比上面的所有方法都简单和正确。添加
treeShake: true,
defaultAssets: {
font: {
family: 'Poppins'
}
}
到nuxt.config.js中的vuetify对象。这应该在整个应用程序中正确启用您的字体系列。（请参阅 defaultAssets 文档了解更多详细信息，并注意需要 treeShake 选项）
我尝试了所有方法，但对我的情况没有任何效果，但以下解决方案肯定有效，但不是最佳解决方案
在您的 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;
}
}
我正在使用 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,
),
);
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>
- 在您的节点中放置一个特定的 class，类似于：
<v-app class="my-application">
第二点很重要，因为所有来自 Vuetify 的字体样式都有 !important，如果你想覆盖，你需要多放一个 class...
希望这篇攻略对大家有所帮助！
额外有用的东西：
- 当将字体从 Roboto 更改为任何其他字体时，默认情况下 vuetify 仍会在“head”标签中导入 cdn Roboto 字体文件 (url)。为了避免这种额外的事情，请使用 vuetify 设置下的“defaultAssets: false”选项。
已编辑
那个东西只在 NUXTJS 中工作，感谢@nlavr 指出它
我不知道如何更改 vuetify 中的默认字体。我一直在 ./node_modules/vuetify 中寻找正确的变量，但找不到。
理想情况下，我不会在模块中进行任何更改，而是宁愿从模块外部覆盖此类变量。
我不能保证这是"best practice"。但考虑到没有关于如何正确执行此操作的文档，我将告诉您我是如何完成此操作的。
我使用的是 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 中包含字体。如果我确实弄清楚了，我会让你知道的。
最简单的方法是简单地在 body 上设置字体系列。如果您正在使用 webpack 并导入 Vuetify stylus 条目 main.styl，您可以简单地用您想要的任何字体覆盖 $font-family 变量。
我注意到，至少在 Vuetify 的最新版本中，您需要同时指定 $body-font-family 和 $heading-font-family 以将所有内容的字体从 Roboto 更改为覆盖中的其他内容（以下these instructions). The redefinition of $headings seems to be necessary since it is defined in _variables.styl and depends on $heading-font-family. Note that Vuetify will be moving to SCSS 在 2.0 中，所以那时会有一个新进程。
$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 }
}
最佳方式
定义（如果您使用 google 字体）
@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 字体，您的脚本标签应该类似于
<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;
}
对于 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
如果您使用的是 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')));
不幸的是，@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 代码
使用 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
此解决方案适用于 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';
您现在需要重新启动您的项目。
我是如何实现的：(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
我在（最新）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';
所以vuetify提供了一个非常简单的解决方案。
在您的 src 目录中创建一个 sass、scss 或 styles 目录，然后在其中创建一个名为 variables.scss 或 variables.sass 的文件。
When you run yarn serve or npm run serve, vuetify will automatically hoist the global Vuetify variables to all of your sass/scss files.
示例 - 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
希望对您有所帮助！
通过 CDN/npm 安装您的字体。然后通过在 ./src/styles/variables.scss
中添加这一行来覆盖这个变量//Change default font to 'Inter'
$body-font-family: "Inter" !important;
一个简短的方法。
这是一个迟到的回复，但是，您可以添加公共 scss/sass/less 文件（在 App.vue 或您的主应用程序文件中调用）它将在整个应用程序中实现它
.body,
.v-application{
font-family: 'Antic', sans-serif;
}
有一种方法比上面的所有方法都简单和正确。添加
treeShake: true,
defaultAssets: {
font: {
family: 'Poppins'
}
}
到nuxt.config.js中的vuetify对象。这应该在整个应用程序中正确启用您的字体系列。（请参阅 defaultAssets 文档了解更多详细信息，并注意需要 treeShake 选项）
我尝试了所有方法，但对我的情况没有任何效果，但以下解决方案肯定有效，但不是最佳解决方案
在您的 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;
}
}
我正在使用 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,
),
);
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>
- 在您的节点中放置一个特定的 class，类似于：
<v-app class="my-application">
第二点很重要，因为所有来自 Vuetify 的字体样式都有 !important，如果你想覆盖，你需要多放一个 class...
希望这篇攻略对大家有所帮助！
额外有用的东西：
- 当将字体从 Roboto 更改为任何其他字体时，默认情况下 vuetify 仍会在“head”标签中导入 cdn Roboto 字体文件 (url)。为了避免这种额外的事情，请使用 vuetify 设置下的“defaultAssets: false”选项。
已编辑
那个东西只在 NUXTJS 中工作，感谢@nlavr 指出它