Как добавить шрифт в проект Vue.js
У меня есть проект с 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
Вот как я импортирую файл scss в компонент Vue
@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')
Где я ошибся? Или подскажите как правильно добавлять шрифты?
Да, ты прав. Но как я могу работать только на ресурсах, а не на публичных? может мне стоит написать какое-нибудь правило для webpack?
Ага. Для этого вам следует использовать плагин file-loader.
Какова ваша точная настройка сборки для вашего интерфейса? смесь laravel? vue-cli? простой веб-пакет? На первый взгляд, я не вижу причин использовать здесь абсолютный путь в URL-адресе. Используйте относительный путь, и если веб-пакет настроен правильно, он правильно обработает разрешение и объединение шрифта.
@FrankProvost Я использую смесь laravel. Добавьте фрагмент кода к вопросу
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Возможно, вам потребуется добавить такую строку в свой файл микса:
.copy('resources/fonts', 'public/fonts')
Этого не требуется при использовании laravel-mix
Этот метод импортирует только файл scss, но не шрифты. Как я мог импортировать файлы шрифтов?
Основываясь на этой проблеме в миксе laravel, github https://github.com/JeffreyWay/laravel-mix/issues/1172 laravel mix будет автоматически копировать шрифты при правильном обращении к ним.
Поэтому я предлагаю использовать относительный путь при ссылке на шрифт. Это должно фактически вызвать микс laravel для создания папки "шрифты" в вашей "общедоступной" папке.
@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); }
Вы сказали ему, как загрузить начертание шрифта, и дали ему путь. Если этот файл не существует на
public/Proxima-Nova-Bold.otf, клиент не может запросить его. Убедитесь, что это так.