Блог

Главная - Вопросы по программированию - Vue Laravel: включение шрифтов в отдельные компоненты Vue

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

#laravel #vue.js

#laravel #vue.js

Вопрос:

У меня есть проект laravel, в котором я использую компоненты с одним представлением. У меня есть глобальный файл.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');
}

Ответ №1:

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

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

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

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

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

Комментарии:

1. страница обслуживается, public/dist/js/app.js и шрифты public/fonts/ включены . Я только что проверил вкладку network и вижу 404 ошибки для шрифтов при использовании «public» в path и даже при его удалении.

2. что ж, вместо этого попробуйте использовать относительный путь к файлам шрифтов (я соответствующим образом обновлю свой ответ)

Ответ №2:

Либо ваши файлы шрифтов имеют неправильное расширение, либо вы просто неправильно ввели расширение в CSS. Это должно быть ttf , а не tff .