Автономные шрифты
Если вы хотите объединить шрифты, используемые в вашем веб-приложении, Fontsource — это библиотека, на которую вы, возможно, захотите взглянуть (ссылка также в приложении в конце страницы). Это позволяет вам устанавливать шрифты, которые вы хотите использовать, а это означает, что ваши шрифты размещаются вами и не требуют загрузки CDN.
Установка каждого шрифта
Чтобы установить шрифты, которые вы хотите использовать, просто запустите команду установки для каждого варианта. В следующих фрагментах кода показано, как будет установлен шрифт для этого PWA.
npm install @fontsource/work-sans
Затем в точке входа моего приложения я должен использовать установленный пакет, импортировав его. Это позволяет мне точно определить, что мне нужно, без дополнительных затрат. Поскольку шрифты могут быть довольно большими, это отличная возможность сэкономить байты.
import "@fontsource/work-sans/400.css";
import "@fontsource/work-sans/900-italic.css";
Наконец, мне нужно установить семейство шрифтов в моем CSS. В зависимости от используемой вами библиотеки (например, Tailwind.css) этот код может выглядеть для вас немного иначе.
body {
font-family: "Work Sans", sans-serif;
}
Переменные шрифты
Fontsource также предоставляет возможность установки вариативных шрифтов, что означает, что у вас есть доступ к новейшим инструментам, когда дело доходит до загрузки шрифтов. Обратите внимание, что не все шрифты доступны в виде вариативных вариантов.
