如何在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 Mix

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

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

- Yaroslav Saenko

---

你告诉它如何加载字体，并给了它一个路径。如果该文件在 public/Proxima-Nova-Bold.otf 不存在，客户端将无法请求它。请确保它存在。 - Ohgodwhy

是的，你说得对。但是我怎么才能只在资源中工作，而不是公共的呢？也许我应该为webpack编写一些规则吗？ - Yaroslav Saenko

是的，你应该使用 file-loader 插件来完成这个任务。 - Ohgodwhy

你的前端确切构建设置是什么？使用 Laravel Mix？Vue CLI？还是纯粹的 Webpack？初步猜测，我不认为在 URL 中使用绝对路径有任何理由。使用相对路径，如果 Webpack 设置正确，它将正确处理字体的解析和捆绑。 - Frnak

@FrankProvost 我使用 Laravel Mix。请把代码片段添加到问题中。 - Yaroslav Saenko

Answer 1

适用于Vue3

1. 下载字体文件并将其与其他静态资源放置在一起。
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>

- Venkatesh A

---

它对我来说没有问题，在URL开头没有~：src: url('@/assets/fonts/<static_font_file>.ttf'); - undefined

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

- Frnak

---

这会在构建时引发错误，运行yarn dev的唯一方法只有这种方式@font-face { font-family: "Proxima Nova Bold"; src: url(/Proxima-Nova-Bold.otf); } - Yaroslav Saenko

Answer 3

你可能需要在你的mix文件中添加这样一行代码：

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

- kaizer_bun

---

使用laravel-mix时，不应该需要这个。 - Frnak

这个方法只导入scss文件，但不包括字体。我该如何导入字体文件？ - Yaroslav Saenko