fonts fontface

polices

Chargez et importez des polices open source CSS spécifiques dans vos projets à l'aide de Node Package Manager ...

L'importation de polices s'est désormais facilitée ... Importer et charger uniquement les variations nécessaires des polices pour vos polices.

Que fait ce package?

• Chargez et importez uniquement les polices nécessaires.
• Améliorez la vitesse de l'application, les performances et l'utilisation hors ligne.

À titre d'exemple: mon thème CSS fonctionne avec Roboto Police avec des variantes de 300 400 500,700. Tout ce que j'ai à faire est d'importer cette police spécifique et ses variations.

Ce package fait exactement cela pour vous.

Histoire

Ce service a été inspiré par le projet de polices de caractères de Kyle Mathews dans lequel toutes les variations des polices ont toutes été chargées ensemble, ce qui a provoqué une réduction des performances en raison de grandes polices téléchargées.

Usage

Juste la façon dont vous pouvez faire ce qui est ci-dessous avec des polices Google:.

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500italic,700&display=swap" />

Vous pouvez maintenant faire de même avec NPM:

 npm install --save font-face-roboto

Chaque Font Fontface est livrée avec tous les fichiers de police nécessaires.

À utiliser dans votre projet, ajoutez-le et importez-le dans votre point d'entrée:

 import "typeface-roboto/300-400-500i-700.css";

Faire ce qui précède importera une police roboto avec des variations de 300 normales, 400 normales, 500IALIQUES et 700 Normal uniquement.

TypeFace suppose que vous utilisez WebPack avec la configuration des chargeurs pour charger des fichiers CSS et de police (vous pouvez utiliser la police de caractères avec d'autres configurations, mais WebPack rend les choses très simples). En supposant que votre configuration Webpack est correctement configurée, vous avez alors besoin d'exiger la police dans le fichier d'entrée de votre projet.

Note

Utilisez avec WebPack afin de regrouper et d'injecter les fichiers nécessaires dans le projet.

Des outils comme Create-React-App et Gatsby travaille hors de la boîte avec cela.

N'hésitez pas à utiliser dans vos projets React.

Contributions

Les soutiens et les contributions à ce projet sont très appréciés !!!