Page d'accueil>Ressources de création de sites Web>Téléchargement de polices
Télécharger

Le projet des polices de caractères est désormais obsolète.

@DecLiningLotus a créé FonTSource qui fournit les mêmes fonctionnalités que les polices mais avec des versions automatisées et une prise en charge plus riche pour l'importation de poids spécifiques, de styles ou de sous-ensembles linguistiques.

Pour commencer à utiliser FonTSource, remplacez dans votre package.json toutes les instances de "Face " "par" @ FonTSource / ".

Modifiez ensuite les importations à partir d'EG "Importer 'TypeFace-Roboto'" à "Importer '@ FonTSource / Roboto / Latin.css'".

Les packages de surface continueront de fonctionner indéfiniment, donc aucune modification immédiate n'est nécessaire.

Polices de caractères

Packages NPM pour les polices de caractères open source - ce qui facilite l'auto-hébergement.

https://www.bricolage.io/typefaces-easiest-way-to-elf-host-fonts/

Pourquoi

  • L'auto-hébergement est nettement plus rapide . Le chargement d'une police de type à partir de polices Google ou d'autres services de police hébergés ajoute une demande réseau supplémentaire (bloquant) . Lors de mes tests, j'ai trouvé que le remplacement des polices Google par une police auto-hébergée peut améliorer SpeedIndex d'un site d'environ 300 MILISECONDS sur le bureau et 1+ seconde sur 3G. C'est un gros problème.
  • Vos polices se chargent hors ligne . Il est ennuyeux de commencer à travailler sur un projet Web dans le train ou l'avion et voir votre interface foirée parce que vous ne pouvez pas accéder aux polices Google. Je me souviens avoir été dans cette situation et avoir fait tout son possible pour éviter de recharger un projet car je savais que je perdrais les polices et que je serais obligé de cesser de travailler.
  • Allez au-delà des polices Google . Certaines de mes polices préférées ne sont pas sur des polices Google comme Clear Sans, Cooper Hewitt et Aleo.
  • Toutes les dépendances Web (site | app) doivent être gérées via NPM chaque fois que possible. C'est la manière moderne.

Quoi

Chaque package de surface est livré avec tous les fichiers de police et CSS nécessaires pour s'auto-héberger une police open source.

Toutes les polices Google ont été ajoutées ainsi qu'une liste petite mais croissante d'autres polices open source. Ouvrez un problème si vous voulez une police ajoutée!

Comment

Ne pouvait pas être plus facile. C'est ainsi que vous ajouteriez des SAN ouverts. 

 npm install --save typeface-open-sans

Puis dans votre application ou le fichier d'entrée de votre site. 

 require ( "typeface-open-sans" )

Et c'est tout! Vous êtes maintenant auto-hébergé Sans!

Il devrait prendre <5 minutes pour échanger des polices Google.

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.

De nombreux outils construits avec WebPack tels que GATSBY et Create React App sont déjà configurés pour fonctionner avec les polices de caractères. Gatsby par défaut incorpore également votre CSS dans votre <head> pour un chargement encore plus rapide.

Si vous n'utilisez pas WebPack ou outil équivalent qui vous permet d'exiger CSS, vous devrez intégrer manuellement les fichiers index.css et polices à partir du package dans votre système de construction.

Alternatives sans webpack

  • Pour les utilisateurs Ember, il y a un addon https://github.com/jeffjewiss/ember-typeface

Ajout d'autres polices

Le moyen le plus simple de savoir si votre police préférée est prise en charge est de rechercher sur NPM ou dans le répertoire des packages dans ce référentiel.

J'adorerais voir toutes les polices open source sur NPM! Ouvrez un problème si une police de caractères préférée est manquante. J'ai publié par programmation toutes les polices de Google Fonts et je prévois de faire de même avec les polices hébergées sur FontsQuirrel via leur API.

Autres idées à explorer

  • Ajoutez une version sous-ensemble de chaque police.
  • Initialement, je viens d'ajouter la prise en charge de la version latine des polices. J'adorerais entendre des idées sur la façon de soutenir d'autres langues. Peut-être que les fichiers CSS supplémentaires ont require('open-sans/greek.css') ?
  • Ship Fallback CSS Aiders - Déterminer votre CSS de secours n'est pas particulièrement facile. Il existe peut-être un moyen d'automatiser cela. Par exemple, si vous utilisez la police X à Fontize y avec Fallback Font Z, voici une fonction pour générer le CSS de secours.
  • Explorez des optimisations futures pour le chargement des polices. https://www.zachleat.com/web/compehensive-webfonts/ a une longue liste. La plupart nécessitent des scripts douloureux par projet. Et si les meilleures stratégies pouvaient être automatisées?
Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout