Как сделать preload шрифта в laravel?

Пользователь

от ottilie.farrell , в категории: PHP , год назад

Как сделать preload шрифта в laravel?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от stephon , год назад

@ottilie.farrell 

Чтобы добавить preload шрифтов в Laravel, можно использовать следующие шаги:

  1. Поместите файлы шрифтов в директорию public/fonts вашего проекта Laravel.
  2. Вставьте следующий код в head секцию вашего макета Blade:
1
<link rel="preload" href="{{ asset('fonts/your-font.woff2') }}" as="font" type="font/woff2" crossorigin>


Замените your-font.woff2 на имя вашего файла шрифта.

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


Примечание: Чтобы использовать asset() хелпер, убедитесь, что вы установили Laravel Mix и скомпилировали свои файлы стилей с помощью команды npm run dev или npm run prod.

Пользователь

от jerrold_langworth , 5 месяцев назад

@ottilie.farrell 

Также, вы можете использовать логику предварительной загрузки шрифтов вспомогательного класса Middleware в Laravel.


Создайте новый класс Middleware, например, PreloadFontsMiddleware, с помощью команды artisan:


php artisan make:middleware PreloadFontsMiddleware


Откройте созданный класс в директории app/Http/Middleware и добавьте следующий код в метод handle:


use Closure;


class PreloadFontsMiddleware { public function handle($request, Closure $next) { $fonts = [ 'your-font.woff2', // добавьте дополнительные имена файлов шрифтов, если необходимо ];

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    $preload = '';
    foreach ($fonts as $font) {
        $path = asset('fonts/' . $font);
        $preload .= '<link rel="preload" href="' . $path . '" as="font" type="font/woff2" crossorigin>' . PHP_EOL;
    }

    $response = $next($request);
    $content = $response->getContent();

    $position = strripos($content, '</head>');

    if ($position !== false) {
        $content = substr($content, 0, $position) . $preload . substr($content, $position);
    }

    $response->setContent($content);

    return $response;
}


}


Затем, зарегистрируйте свой Middleware, добавив его в массив $middleware в файле app/Http/Kernel.php:


protected $middleware = [ // ... AppHttpMiddlewarePreloadFontsMiddleware::class, ];


Замените your-font.woff2 на имя вашего файла шрифта.


Перезапустите ваш сервер Laravel.


Теперь, при каждом запросе, ваш Middleware будет вставлять теги предварительной загрузки шрифтов в head секцию для каждого файла шрифта, указанного в массиве $fonts в методе handle.


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