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