fonts fontface
1.0.0
Загрузить и импортировать конкретные шрифты CSS с открытым исходным кодом в ваши проекты, используя диспетчер пакетов узлов ...
Импорт шрифтов теперь облегчил ... импортировать и загружать только необходимые шрифты для ваших шрифтов.
В качестве примера: моя тема CSS работает с шрифтом Roboto с вариациями 300 400 500 700. Все, что мне нужно сделать, это импортировать этот конкретный шрифт и его вариации.
Этот пакет делает именно это для вас.
Эта услуга была вдохновлена проектом шрифтов Кайла Мэтьюза, в котором все вариации шрифтов были загружены вместе, что вызвало снижение производительности из -за больших загруженных шрифтов.
Точно так же, как вы можете сделать ниже с шрифтами Google:.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500italic,700&display=swap" />
Теперь вы можете сделать то же самое с NPM:
npm install --save font-face-roboto
Каждый Font-Fontface в комплекте со всеми необходимыми файлами шрифтов.
Чтобы использовать в вашем проекте, добавьте и импортируйте его в свою точку входа:
import "typeface-roboto/300-400-500i-700.css";
Вышеуказанное будет импортировать шрифт Roboto с вариациями 300 -нормских, 400 -нормских, 500талических и 700 нормических.
Signface предполагает, что вы используете WebPack с настройкой загрузчиков для загрузки CSS и файлов шрифтов (вы можете использовать шрифт с другими настройками, но WebPack делает вещи действительно действительно простыми). Предполагая, что ваша конфигурация WebPack настроена правильно, вам просто нужно потребовать шрифт в файле входа для вашего проекта.
Используйте вместе с WebPack, чтобы объединить и вводить необходимые файлы в проект.
Такие инструменты, как Create-React-App и Gatsby, работают из коробки вместе с этим.
Не стесняйтесь использовать в ваших проектах React.
Поддержка и вклад в этот проект высоко ценится !!!
