webfont generator

Générateur de polices Web

Une police entre, toutes les polices Web sortent.

Le but de cet outil est d'automatiser la génération de formats de polices conviviaux et de règles CSS @font-face à partir de fichiers de polices arbitraires, sans avoir à compter sur les services Web ou à nécessiter une connexion réseau. Cet outil peut générer des URL de données en ligne si nécessaire.

Consultez l'article Using @ Font-Face sur CSS-Tricks.com pour plus d'informations sur la maximisation de la compatibilité des polices intégrées.

Start

./setup # Fetch and build third-party libraries
./bin/generate-webfonts MyFont.ttf -o assets/ # Convert a font 

Usage

Le script du pilote est generate-webfonts . À sa base, il accepte un fichier de police comme son argument et crache toutes les polices converties en répertoire. Il peut également générer des CSS pour la règle de @font-face appropriée.

 ./bin/generate-webfonts -o assets MyFont.ttf --css MyFont.css

La commande ci-dessus, qui utilise les formats de sortie par défaut, génère les fichiers suivants:

• MyFont.css
• assets/MyFont.woff
• assets/MyFont.woff2
• assets/MyFont.ttf
• assets/MyFont.eot
• assets/MyFont.svg

Le fichier MyFont.css contiendra ce qui suit:

 @font-face {
  font-family : 'MyFont' ;
  src : url ( 'assets/MyFont.eot' );
  src : url ( 'assets/MyFont.eot?#iefix' ) format ( 'embedded-opentype' ) ,
       url ( 'assets/MyFont.woff2' ) format ( 'woff2' ) ,
       url ( 'assets/MyFont.woff' ) format ( 'woff' ) ,
       url ( 'assets/MyFont.ttf' ) format ( 'truetype' ) ,
       url ( 'assets/MyFont.svg#MyFont' ) format ( 'svg' );
}

Conceptuellement, étant donné une liste de fichiers d'entrée et une liste de formats de sortie, le convertisseur tentera de satisfaire toutes les exigences du format de sortie en copie les fichiers d'entrée correspondant et la conversion des fichiers pour combler les lacunes. En raison de limitations dans les convertisseurs de police sous-jacentes, certains formats intermédiaires non demandés peuvent être générés.

La commande évitera de générer un fichier dans un certain format de sortie si un fichier correspondant à ce format est déjà répertorié comme l'une des entrées. Dans ce cas, le fichier d'entrée sera simplement copié dans le répertoire de destination (ou laissé seul, s'il est déjà dans le répertoire de sortie). Si un tel fichier n'est pas répertorié dans les arguments, il sera écrasé avec un fichier nouvellement converti, même s'il existe déjà dans le répertoire de sortie.

Voir les options ci-dessous pour une utilisation plus avancée.

Syntaxe

Le script bin/generate-webfonts accepte une liste de fichiers de police en entrée et un certain nombre d'options:

-o --output

Répertoire de destination pour les fichiers convertis. Même si seules les polices en ligne sont générées, un répertoire de destination est nécessaire pour contenir des fichiers intermédiaires.

-f --format

Liste des formats de sortie séparée par des virgules. Les formats possibles sont:

• TTF
• woff
• woff2
• eot
• SVG
• OTF

Tout format suffixé avec :inline entraînera l'incliné de la police dans le fichier CSS en tant qu'URL de données codées Base64, plutôt qu'une URL d'un fichier.

La liste de format par défaut est eot,woff2,woff,ttf,svg .

-c --css

Chemin du fichier CSS généré. Utiliser - pour Stdout. S'il est omis, aucun CSS n'est généré.

-p --prefix

Préfixe des chemins de police utilisés dans le CSS généré. Par exemple, si votre feuille de style est servie à partir de css/ et que vos polices sont servies à partir de fonts/ , alors vous voudrez définir le préfixe sur ../fonts/ . Le préfixe par défaut est le nom du répertoire de sortie.

--font-family

Nom de la famille des polices utilisées dans le fichier CSS. La valeur par défaut est le nom de base du premier fichier d'entrée.

--verbose

Afficher la sortie verbeuse lors de l'exécution.

-v --version

Version d'affichage.

Formats pris en charge

generate-webfonts prend en charge les formats de police suivants:

• TTF
• woff
• woff2
• eot
• SVG
• OTF

Il peut se convertir à et depuis l'un des formats énumérés ci-dessus, à une exception: il ne peut pas convertir EOT à d'autres formats.

Outils tiers

Le générateur exploite trois bibliothèques / outils tiers pour convertir les polices. Étant donné qu'aucun outil unique ne prend en charge tous les formats de police, le travail du générateur consiste à déterminer une bonne chaîne de convertisseurs à utiliser pour convertir entre deux formats de police. Sous le capot, il est en fait implémenté comme un problème de pattes les plus courts sur un graphique de dépendance.

Les outils tiers utilisés sont:

• FontForge, un programme d'éditeur de police gratuit, à usage général et scriptable
• Sfntly par Google, une bibliothèque Java open source qui a autrefois alimenté les polices Google
• Convertisseur WOFF2 de Google

FontForge prend en charge la lecture et la génération d'un bon nombre de formats de police, bien qu'il n'ait aucun support pour les formats EOT ou WOFF2. La bibliothèque sfntly rapide et rapide peut convertir les polices TTF en Eot ou Woff, couvrant l'une de ces lacunes. Le convertisseur WOFF2 de Google est également utilisé pour convertir entre les formats WOFF2 et TTF.

Installation

Comme mentionné ci-dessus, exécutez ./setup pour télécharger et construire les bibliothèques tierces. En fonctionnement ./setup vérifiera localement les référentiels de convertisseurs SFNTly et WOFF2 où generate-webfonts peuvent les trouver. Installez FontForge à l'aide de votre gestionnaire de packages ou directement à partir de leur site Web.

Le processus de configuration suppose un environnement * nix. Il n'y a actuellement aucune prise en charge de la configuration de cet outil sur Windows.

Les commandes suivantes sont nécessaires pour exécuter le script de configuration:

• git
• java et javac
• mvn (Maven)

Le script generate-webfonts lui-même nécessite Python 3.

Réflexions de clôture

Veuillez convertir de manière responsable! Respectez les droits d'auteur des créateurs de polices.