使用Vuetify / Vuejs / Laravel中的自定义字体覆盖默认字体
使用Vuetify / Vuejs / Laravel中的自定义字体覆盖默认字体
提问于 2021-08-07 11:46:36
我想在我的项目中使用本地字体，所以我从谷歌下载了它们，并将它们放在我的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;
},
},
},
});回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-07 14:21:13
https://vuetifyjs.com/en/features/sass-variables/#caveats
在变量文件中不应该有任何实际的样式，只有变量。font-face和其他样式声明应该放在一个单独的文件中，然后导入到app.js中
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68692087
复制相关文章
相似问题
腾讯云开发者
