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

Posted 2023-02-22

【中文标题】如何在 Vue.js 项目中添加字体

【英文标题】：How to add font in Vue.js project

【发布时间】：2019-01-02 13:47:59

【问题描述】：

我有一个使用 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')

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

【问题讨论】：

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

是的，你是对的。但是我如何才能只在资源中工作，而不是在公共领域工作呢？也许我应该为 webpack 写一些规则？

是的。您应该为此使用file-loader 插件。

您的前端的确切构建设置是什么？拉拉维尔混合？ Vue cli ?普通的 webpack ？对于第一个猜测，我没有看到在 url 中使用绝对路径的任何理由。使用相对路径，如果 webpack 设置正确，它将正确处理解析和捆绑字体。

@FrankProvost 我使用 laravel mix。在问题中添加代码sn-p

【参考方案1】：

适用于 vue3

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

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

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

<style>
<you-selector> 
    font-family: <name_u_chose_before>;

</style>

【参考方案2】：

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

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

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

【讨论】：

这会在构建时导致错误，运行 yarn dev 的唯一方法就是这样 @font-face font-family: "Proxima Nova Bold"; src: url(/Proxima-Nova-Bold.otf);

【参考方案3】：

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

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

【讨论】：

在使用 laravel-mix 时应该不需要这个

这个方法只导入scss文件，不导入字体。如何导入字体文件？