通过 Vuetify / Vuejs / Laravel 中的自定义字体覆盖默认字体答案

【问题标题】：Override default font by custom font in Vuetify / Vuejs / Laravel通过 Vuetify / Vuejs / Laravel 中的自定义字体覆盖默认字体
【发布时间】：2021-10-11 23:14:12
【问题描述】：

我想在我的项目中使用本地字体，所以我从 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;
                },
            },
       
          },
    });

【问题讨论】：

标签： fonts vuetify.js font-face laravel-mix

【解决方案1】：

https://vuetifyjs.com/en/features/sass-variables/#caveats

你不应该在变量文件中有任何实际的样式，只有变量。 font-face 和其他样式声明应该放在一个单独的文件中，然后导入到 app.js

【讨论】：