Vue + Laravel: включение шрифтов в компоненты Single Vue

Question

У меня есть проект laravel, где я использую отдельные компоненты вида.У меня есть файл global.scss, где у меня есть код ниже, чтобы включить мои шрифты, которые находятся в папке public / fonts.В разделе стилей каждого компонента vue я использую @import '../../css/global.scss'; для импорта файла global.scss, но шрифты по-прежнему не пригодны для использования.Я что-то не так делаю с этой настройкой?

@font-face {
    font-family: 'Testing-Font';
    src: url('/public/fonts/Avenir-Black.tff');
}
@font-face {
    font-family: 'Avenir-Light';
    src: url('/public/fonts/Avenir-Light.tff');
}
@font-face {
    font-family: 'Test-Fontname';
    src: url('/public/fonts/Avenir-Book.tff');
}

Answer 1

при условии, что public является директором, с которого обслуживается веб-страница, вы, вероятно, должны опустить его в путях к файлам шрифтов:

@font-face {
    font-family: 'Testing-Font';
    src: url('/fonts/Avenir-Black.tff');
}
@font-face {
    font-family: 'Avenir-Light';
    src: url('/fonts/Avenir-Light.tff');
}
@font-face {
    font-family: 'Test-Fontname';
    src: url('/fonts/Avenir-Book.tff');
}

, чтобы увидеть, что-то не так с процессом загрузки, откройтена вкладке network dev-tools вашего любимого браузера и найдите 40x error.

, если проблема не устранена (и происходит из-за ошибок 404), попробуйте использовать относительныйпуть к файлам шрифтов, чтобы избежать любых неизвестных, когда ваша система сборки разрешает корневой путь (/).

также, в зависимости от варианта использования (библиотека / приложение), я бы включил его в файл точки входатак что любой компонент может использовать его.