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')

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

Answer 1

适用于 vue3

1. 下载字体并将其与其他 static 资源放在一起。
2. 在 app.vue 中使用 @font-face 注册字体系列，如下所示：

<style>
@font-face {
    font-family: <name_u_choose>;
    src: url('~@/assets/fonts/<static_font_file>.ttf');
}

3. 在您的组件中使用它，如下所示

<style>
<you-selector> {
    font-family: <name_u_chose_before>;
}
</style>

Answer 2

基于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');
}

Answer 3

您可能需要在混合文件中添加这样的行：

.copy('resources/fonts', 'public/fonts')