在 Vuetify / Vuejs / Laravel 中用自定义字体覆盖默认字体
Override default font by custom font in Vuetify / Vuejs / Laravel
我想在我的项目中使用本地字体,所以我从 Google 下载它们并将它们放在我的 public/fonts
目录中,如下图所示:
如 documentation 中所述,我覆盖了 Vuetify 中的 Sass 变量。在覆盖 Vuetify 默认变量的文件中,我添加了如下自定义字体:
/* changa-one-regular - latin */
@font-face {
font-family: 'Changa One';
font-style: normal;
font-weight: 400;
src: url('../fonts/changa-one-v13-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/changa-one-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/changa-one-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/changa-one-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/changa-one-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/changa-one-v13-latin-regular.svg#ChangaOne') format('svg'); /* Legacy iOS */
}
/* changa-one-italic - latin */
@font-face {
font-family: 'Changa One';
font-style: italic;
font-weight: 400;
src: url('../fonts/changa-one-v13-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/changa-one-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/changa-one-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/changa-one-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/changa-one-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/changa-one-v13-latin-italic.svg#ChangaOne') format('svg'); /* Legacy iOS */
}
/* nunito-sans-300 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/nunito-sans-v6-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-sans-v6-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-sans-v6-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-sans-v6-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-sans-v6-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-sans-v6-latin-300.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
/* nunito-sans-regular - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/nunito-sans-v6-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-sans-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-sans-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-sans-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-sans-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-sans-v6-latin-regular.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
/* nunito-sans-700 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/nunito-sans-v6-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-sans-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-sans-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-sans-v6-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-sans-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-sans-v6-latin-700.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
// Globals
$body-font-family: 'Nunito Sans' !important;
$font-family: 'Nunito Sans' !important;
$heading-font-family: 'Changa One' !important;
$btn-font-weight: 700;
//all variable changes need to happen before @import
//specificity needs to be taken into consideration for some components
//because !important has been assigned to their css
//https://dev.to/emmabostian/css-specificity-1kca
html,
body,
.v-application {
font-family: $body-font-family;
}
.v-application {
font-family: $body-font-family, sans-serif !important;
}
$material-dark: (
'background': #000
);
//added all typography helper classes because of css specificity override
//https://vuetifyjs.com/en/styles/typography#typography
.v-application {
.display-4,
.display-3,
.display-2,
.display-1,
.headline,
.title,
.subtitle-1,
.subtitle-2,
.body-1,
.body-2,
.caption,
.overline
{
font-family: $body-font-family;
}
h1 {
font-family: $heading-font-family;
font-weight: 400;
font-style: italic;
}
}
@import '~vuetify/src/styles/settings/_variables.scss';
当我 运行 npm run watch
我得到以下错误:
Error: Can't resolve '../fonts/changa-one-v13-latin-italic.eot' in 'D:\laragon\www\we-are\node_modules\vuetify\src\components\VSnackbar'
at finishWithoutResolve (D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:293:18)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:362:15
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
它没有得到我自定义添加的字体是什么原因?我错过了什么吗?我的 webpack.mix
文件配置如下:
const mix = require('laravel-mix');
require('vuetifyjs-mix-extension')
mix
.js('resources/js/app.js', 'public/js')
.vuetify('vuetify-loader', 'resources/sass/variables.scss', { progressiveImages: true })
.sourceMaps(true)
.vue()
.sass('resources/sass/main.scss', 'public/css')
.copy('resources/assets', 'public/assets')
.browserSync({
proxy: '127.0.0.1:8000',
port: 3000,
ui: false,
https: true,
files: ['app/**/*.php', 'resources/**/*', 'public/**/*'],
snippetOptions: {
rule: {
match: /<\/head>/i,
fn: function (snippet, match) {
return snippet + match;
},
},
},
});
https://vuetifyjs.com/en/features/sass-variables/#caveats
变量文件中不应该有任何实际样式,只有变量。 font-face
和其他样式声明应放在一个单独的文件中,然后将其导入 app.js
我想在我的项目中使用本地字体,所以我从 Google 下载它们并将它们放在我的 public/fonts
目录中,如下图所示:
如 documentation 中所述,我覆盖了 Vuetify 中的 Sass 变量。在覆盖 Vuetify 默认变量的文件中,我添加了如下自定义字体:
/* changa-one-regular - latin */
@font-face {
font-family: 'Changa One';
font-style: normal;
font-weight: 400;
src: url('../fonts/changa-one-v13-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/changa-one-v13-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/changa-one-v13-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/changa-one-v13-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/changa-one-v13-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/changa-one-v13-latin-regular.svg#ChangaOne') format('svg'); /* Legacy iOS */
}
/* changa-one-italic - latin */
@font-face {
font-family: 'Changa One';
font-style: italic;
font-weight: 400;
src: url('../fonts/changa-one-v13-latin-italic.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/changa-one-v13-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/changa-one-v13-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/changa-one-v13-latin-italic.woff') format('woff'), /* Modern Browsers */
url('../fonts/changa-one-v13-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/changa-one-v13-latin-italic.svg#ChangaOne') format('svg'); /* Legacy iOS */
}
/* nunito-sans-300 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 300;
src: url('../fonts/nunito-sans-v6-latin-300.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-sans-v6-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-sans-v6-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-sans-v6-latin-300.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-sans-v6-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-sans-v6-latin-300.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
/* nunito-sans-regular - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 400;
src: url('../fonts/nunito-sans-v6-latin-regular.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-sans-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-sans-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-sans-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-sans-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-sans-v6-latin-regular.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
/* nunito-sans-700 - latin */
@font-face {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 700;
src: url('../fonts/nunito-sans-v6-latin-700.eot'); /* IE9 Compat Modes */
src: local(''),
url('../fonts/nunito-sans-v6-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/nunito-sans-v6-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/nunito-sans-v6-latin-700.woff') format('woff'), /* Modern Browsers */
url('../fonts/nunito-sans-v6-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/nunito-sans-v6-latin-700.svg#NunitoSans') format('svg'); /* Legacy iOS */
}
// Globals
$body-font-family: 'Nunito Sans' !important;
$font-family: 'Nunito Sans' !important;
$heading-font-family: 'Changa One' !important;
$btn-font-weight: 700;
//all variable changes need to happen before @import
//specificity needs to be taken into consideration for some components
//because !important has been assigned to their css
//https://dev.to/emmabostian/css-specificity-1kca
html,
body,
.v-application {
font-family: $body-font-family;
}
.v-application {
font-family: $body-font-family, sans-serif !important;
}
$material-dark: (
'background': #000
);
//added all typography helper classes because of css specificity override
//https://vuetifyjs.com/en/styles/typography#typography
.v-application {
.display-4,
.display-3,
.display-2,
.display-1,
.headline,
.title,
.subtitle-1,
.subtitle-2,
.body-1,
.body-2,
.caption,
.overline
{
font-family: $body-font-family;
}
h1 {
font-family: $heading-font-family;
font-weight: 400;
font-style: italic;
}
}
@import '~vuetify/src/styles/settings/_variables.scss';
当我 运行 npm run watch
我得到以下错误:
Error: Can't resolve '../fonts/changa-one-v13-latin-italic.eot' in 'D:\laragon\www\we-are\node_modules\vuetify\src\components\VSnackbar'
at finishWithoutResolve (D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:293:18)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:362:15
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
at D:\laragon\www\we-are\node_modules\enhanced-resolve\lib\Resolver.js:410:5
at eval (eval at create (D:\laragon\www\we-are\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
它没有得到我自定义添加的字体是什么原因?我错过了什么吗?我的 webpack.mix
文件配置如下:
const mix = require('laravel-mix');
require('vuetifyjs-mix-extension')
mix
.js('resources/js/app.js', 'public/js')
.vuetify('vuetify-loader', 'resources/sass/variables.scss', { progressiveImages: true })
.sourceMaps(true)
.vue()
.sass('resources/sass/main.scss', 'public/css')
.copy('resources/assets', 'public/assets')
.browserSync({
proxy: '127.0.0.1:8000',
port: 3000,
ui: false,
https: true,
files: ['app/**/*.php', 'resources/**/*', 'public/**/*'],
snippetOptions: {
rule: {
match: /<\/head>/i,
fn: function (snippet, match) {
return snippet + match;
},
},
},
});
https://vuetifyjs.com/en/features/sass-variables/#caveats
变量文件中不应该有任何实际样式,只有变量。 font-face
和其他样式声明应放在一个单独的文件中,然后将其导入 app.js