Шрифт «Inter» выглядит размытым в приложении Next.js, но четким на веб-сайте PHP ⇐ CSS

[Anonymous]

Описание:
У меня возникла проблема с отрисовкой шрифта Inter в моем приложении Next.js. Тот же шрифт выглядит четким и четким на веб-сайте на основе PHP, но в приложении Next.js он выглядит размытым, особенно при меньшем размере текста.
Что я сделал Пробовал:
Импорт шрифта:
В _document.js я импортирую шрифт следующим образом:

Код: Выделить всё

Корректировка CSS:
Я добавил следующее в свои глобальные стили, чтобы улучшить отрисовку шрифтов:

Код: Выделить всё

html,
body {
font-family: 'Inter', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}

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

Код: Выделить всё

import { Inter } from "@next/font/google";

const inter = Inter({ subsets: ["latin"] });

...;

Однако это привело к ошибке «Модуль не найден» для @next/font/google.
Сглаживание:
Я гарантировал следующее: дополнительные свойства были применены глобально:

Код: Выделить всё

html {
transform: scale(1);
zoom: 1;
}

Производственная сборка:
Я протестировал приложение в производственном режиме (npm run build и npm run start), чтобы исключить несогласованность разработки, но проблема сохраняется.
Дополнительные примечания:
На сайте PHP нет специального CSS, кроме базовых настроек семейства шрифтов и веса.
Браузер инструменты разработчика подтверждают, что правильный шрифт (Inter) загружен на обоих сайты.
Настройки сглаживания шрифтов в глобальном CSS, похоже, не решают проблему.
Вопрос:
Почему «Шрифт в моем приложении Next.js выглядит размытым по сравнению с веб-сайтом PHP? Как я могу обеспечить согласованное и четкое отображение шрифтов на обеих платформах?
Сайт PHP:
https://www.uksoccershop.com/
Снимок экрана PHP-сайта
Следующий сайт JS:
https://ukss.veldev.com/
введите здесь описание изображения< /p>
Я попробовал поделиться этим видео для вашего удобства. чтобы показать разницу, но это не позволило мне опубликовать сообщение. Постараюсь поделиться тем же в комментариях.

Подробнее здесь: https://stackoverflow.com/questions/793 ... hp-website