Как использовать @next/font для оптимизации шрифтов в Next.js

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

Возможно, вы захотите использовать собственные шрифты, чтобы сделать ваше приложение Next.js более привлекательным. Использование пользовательских шрифтов может значительно улучшить внешний вид вашего веб-сайта, но также может замедлить его производительность, если его не оптимизировать должным образом. @next/шрифтпакет является решением этой проблемы.

Пакет @next/font предоставляет простой и эффективный способ оптимизации загрузки шрифтов в Next.js, улучшая время загрузки страницы и повышая общую производительность. В этой статье представлена ​​информация о том, как использовать @next/font в проекте Next.js.

Вы можете установить@next/шрифтpackage, выполнив следующую команду в терминале:

Если вы используете пряжу, вы можете установить пакет, выполнив следующую команду:

@next/шрифт пакет оптимизирует использование шрифтов Google. @next/шрифтавтоматически размещает шрифты Google на сервере Next.js, чтобы в Google не отправлялось никаких запросов на получение шрифтов.

Чтобы использовать шрифт Google в своем приложении, вы импортируете шрифт как функцию из@next/font/googleв_app.jsфайл встраницыкаталог:

В приведенном выше блоке кода вы создали переменный шрифт, используяРобот функция шрифта. подмножество свойство задает шрифт только латинскими символами; если вы используете другой язык, вы можете установить шрифт на этот язык.

Вы также можете указать толщину шрифта вместе со стилем шрифта при определении шрифта:

Вы указываете несколько толщин и стилей шрифтов, используя массивы.

Например:

Далее вы обернете свои компоненты восновнойи передайте шрифт как класс восновнойярлык:

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

Вот так:

@next/шрифт пакет также оптимизирует использование локальных шрифтов. Техника оптимизации локальных шрифтов через@next/шрифтПакет очень похож на оптимизацию шрифтов Google, с небольшими отличиями.

Чтобы оптимизировать локальные шрифты, используйтелокальный шрифтфункция, обеспечиваемая@next/шрифт упаковка. Вы импортируетелокальный шрифтфункция от@next/font/localа затем определите свой переменный шрифт, прежде чем использовать его в приложении Next.js.

Вот так:

Вы определяете переменный шрифтмойшрифтиспользуялокальный шрифт функция. локальный шрифт функция принимает объект в качестве аргумента. Объект имеет одно свойство,источник, которому присвоен путь к файлу шрифта вВОФФ2формат"./my-font.woff2".

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

Например:

Чтобы использовать@next/шрифт пакет с Tailwind CSS, вам необходимо использовать переменные CSS. Для этого вы определите свой шрифт, используя Google или локальные шрифты, а затем загрузите свой шрифт с опцией переменной, чтобы указать имя переменной CSS.

Например:

В приведенном выше блоке кода вы создали шрифт,интер,и установите переменную в--font-inter . имя классаосновного элемента затем устанавливается в переменную шрифта ишрифт-без . меж.переменнаякласс будет применятьИнтершрифт на страницу, ашрифт-безclass применит шрифт без засечек по умолчанию.

Затем вы добавляете переменную CSS в файл конфигурации попутного ветра.