javascript - 如何在 Vue.js 项目中添加字体

Question

我有一个使用 Laravel 和 Vue.js 的项目，我使用 scss。我想在我的项目中添加新字体，但我做不到。我创建文件 fonts.scss，创建一个带有字体的变量

@font-face {
  font-family: "Proxima Nova Bold";
  src: url(/Proxima-Nova-Bold.otf);
}

$proxima-nova-bold: 'Proxima Nova Bold', sans-serif;

我有控制台错误 GET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED

下面是我在Vue组件中导入scss文件的方法

@import '../../../fonts/fonts.scss';

这是我的 laravel 组合

let mix = require('laravel-mix');

mix.copy('resources/assets/images', 'public/images', false)
    .js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')

我哪里弄错了？或者告诉我如何正确添加字体？

Answer 1

基于 laravel mix github 中的这个问题 https://github.com/JeffreyWay/laravel-mix/issues/1172 laravel mix 将在正确引用字体时自动复制字体。

因此我建议在引用字体时使用相对路径。这实际上应该触发 laravel mix 在你的“公共(public)”文件夹中创建一个文件夹“fonts”

@font-face {
  font-family: "Proxima Nova Bold";
  src: url('./../fonts/Proxima-Nova-Bold.otf');
}