laravel 如何在 Vue.js 项目中添加字体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51524014/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add font in Vue.js project
提问by Yaroslav Saenko
I have a project with Laravel and Vue.js and I use scss. I want to add new font into my project and I can't do this. I create file fonts.scss, create a variable with font
我有一个使用 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;
And I have console mistake GET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED
我有控制台错误 GET http://local.{my-domain}/Proxima-Nova-Bold.otf net::ERR_ABORTED
Here is how I import scss file in Vue component
这是我在 Vue 组件中导入 scss 文件的方法
@import '../../../fonts/fonts.scss';
Here is my laravel mix
这是我的 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')
Where did I make mistake? Or tell me how to add fonts correctly?
我哪里出错了？或者告诉我如何正确添加字体？
回答by Frank Provost
Based on this issue in the laravel mix github https://github.com/JeffreyWay/laravel-mix/issues/1172laravel mix will copy the fonts automatically when referencing them correctly.
基于 laravel mix github https://github.com/JeffreyWay/laravel-mix/issues/1172中的这个问题，laravel mix 会在正确引用字体时自动复制字体。
Therefore i suggest to use a relative path when referencing the font. This should actually trigger laravel mix to create a folder "fonts" in your "public" folder
因此我建议在引用字体时使用相对路径。这实际上应该触发 laravel mix 在你的“public”文件夹中创建一个文件夹“fonts”
@font-face {
font-family: "Proxima Nova Bold";
src: url('./../fonts/Proxima-Nova-Bold.otf');
}
回答by kaizer_bun
You may need to add a line like this to your mix file:
您可能需要在 mix 文件中添加这样的一行：
.copy('resources/fonts', 'public/fonts')
