Fontimize

Faire fondre

Optimisez facilement les polices (sous-ensemble) pour uniquement les glyphes spécifiques nécessaires à votre texte ou à votre HTML!

Êtes-vous inquiet de la taille initiale de téléchargement de votre site Web? Nécessitant des mégaoctets de téléchargements, et vous avez optimisé et minifié votre CSS et JavaScript et vos images, mais vous avez repéré de grandes polices? Fontimize est pour vous! Cet outil analyse vos fichiers HTML et CSS (ou tout texte) et crée des sous-ensembles de polices , des fichiers de police qui ne contiennent que les caractères ou les glyphes qui sont réellement utilisés.

En pratique, vous pouvez réduire votre taille de téléchargement de police à 10% ou moins de l'original.

Fontimize utilise TTF2Web, et beaucoup de remerciements et de crédit à l'auteur de cette bibliothèque fantastique.

Exemples de résultats

Cette bibliothèque a été créée à l'origine pour mon site Web personnel. Il a utilisé quatre polices TTF totalisant un peu plus de 1,5 Mo. (Ce n'est pas inhabituel: un pour les titres, un pour le texte normal avec une variante pour l'italique, plus un quatrième pour une bizarrerie typographique, DropCaps.)

Après avoir exécuté Fontimize, la taille totale de toutes les polices combinées est de 76 Ko.

1,5 Mo de 76 Ko est une économie de 95,2%! Cela a eu un impact notable sur l'heure initiale pour télécharger une page sur le site, ainsi que un impact immense sur le rendu: avant, la charge initiale du site rendrait avec des polices génériques de Serif, puis renforcera quelques secondes plus tard une fois que les polices auraient été téléchargées, ce qui avait l'air vraiment mauvais. Maintenant, vous obtiendrez les nouvelles polices immédiatement ou avant votre remarque et le site sera correct dès le début.

Usage

Fontimize est une bibliothèque Python et peut être incluse dans votre logiciel Python ou utilisé autonome sur la ligne de commande.

Bibliothèque

Commencez par installer et importation de fontime:

 $ python3 -m pip install fontimize

Dans votre script:

 import fontimize

Pour analyser un ensemble de fichiers HTML sur le disque, et les fichiers CSS qu'ils utilisent, et exporter de nouvelles polices (par défaut dans le même dossier que les polices d'origine) ne contenant que les glyphes utilisés dans le HTML:

 all_html_files = [ 'input/one.html' , 'input/two.html' ]

font_results = fontimize . optimise_fonts_for_files ( all_html_files )

print ( font_results [ "css" ])
# Prints CSS files found used by any of the HTML input files:
#  { 'input/main.css',
#    'input/secondary.css' }

print ( font_results [ "fonts" ])
# Prints pairs mapping the old fonts to the new optimised font generated for each. Use this to, eg, rewrite your CSS
# By default exports to the same folder as the input files; use `font_output_dir` to change
#  { 'input/fonts/Arial.ttf': 'input/fonts/Arial.FontimizeSubset.woff2',
#    'input/fonts/EB Garamond.ttf': 'input/fonts/EB Garamond.FontimizeSubset.woff2' }

print ( font_results [ "chars" ]
# Prints the set of characters that were found or synthesised that the output fonts will use
#   { ',', 'u', '.', '@', 'n', 'a', '_', 'l', 'i', 'h', 'Q', 'y', 'w', 'T', 'q', 'j', ' ', 'p', 'm', 's', 'o', 't', 'c' ... }

print ( font_results [ "uranges" ]
# Prints the same set of characters, formatted as ranges of Unicode characters
#   U+0020, U+002C, U+002E, U+0040, U+0051, U+0054, U+005F, U+0061-007A ...

Référence complète

optimise_fonts_for_files()

C'est probablement la méthode que vous souhaitez utiliser.

Optimise / sous-ensemble les polices basées sur un ensemble de fichiers d'entrée sur le disque, et (automatiquement) les fichiers CSS externes que tout fichier HTML fait référence. Les fichiers sont analysés comme HTML s'ils ont une extension de fichier .htm ou .html (le texte visible utilisateur est extrait et CSS est analysé), sinon les fichiers sont traités comme du texte. Renvoie la liste des fichiers CSS trouvés et une carte des anciens à de nouveaux fichiers de police optimisés.

Paramètres:

• html_files : list[str] : liste des chemins, chacun étant un fichier html. Chacun sera analysé.
• font_output_dir = "" : Chemin vers où les polices sous-ensemble doivent être placées. Par défaut, il est vide ( "" ), ce qui signifie générer les nouvelles polices au même emplacement que les polices d'entrée. Étant donné que les nouvelles polices ont un nom différent (voir subsetname , le paramètre suivant), vous ne remplacerez pas les polices d'entrée. Il n'y a pas de vérification si des polices de sous-ensemble existent déjà avant d'être écrites.
• subsetname = "FontimizeSubset" : les polices optimisées sont renommées dans le format OriginalName.FontimizeSubset.woff2 . Il est important de différencier les polices sous-ensemble des polices d'origine avec tous les glyphes. Vous pouvez modifier le nom de sous-ensemble de sortie en toute autre chaîne valide sur votre système de fichiers.
• verbose : bool = False : si True , émet des informations de diagnostic sur les fichiers CSS, les polices, etc. qu'elle est trouvée et génére.
• print_stats : bool = True : imprime les informations pour la taille totale sur le disque des polices d'entrée, et la taille totale des polices optimisées et les économies en pourcentage. Définissez ceci sur False si vous voulez qu'il fonctionne silencieusement.
• fonts : list[str] = [] : une liste de chemins de trajet vers les fichiers de police. Ceux-ci sont ajoutés à toutes les polices que la méthode trouve via CSS. Vous le spécifieriez généralement si vous transmettez des fichiers texte plutôt que HTML
• addtl_text : str = "" : caractères supplémentaires qui doivent être ajoutés à ceux trouvés dans les fichiers

Renvoie:

• dict[str, typing.Any]
• return_value["css"] -> Liste des fichiers CSS uniques que les fichiers HTML utilisent
• return_value["fonts"] -> Un dict où keys() sont les fichiers de police d'origine, et la valeur pour chaque clé est le fichier de police de remplacement généré. Vous pouvez l'utiliser pour mettre à jour les références aux fichiers de police d'origine. Notez que Fontimizer ne réécrit pas le CSS d'entrée.
• return_value["chars"] -> un set de caractères trouvés lors de l'analyse de l'entrée
• return_value["uranges] -> Les plages Unicode pour les mêmes caractères:" U + 1000-2000, U + 2500-2501 ", etc.

optimise_fonts_for_html_contents()

Semblable à optimise_fonts_for_html_files , sauf que l'entrée est HTML en tant que chaîne (par exemple <head>...</head><body>...<body> ). Il n'analyse pas pour trouver les fichiers CSS utilisés (et donc les polices utilisées), vous devez donc également lui donner une liste de fichiers de police à optimiser.

Paramètres:

• html_contents : list[str] : liste des chaînes HTML. Le texte sera extrait et utilisé pour générer la liste des glyphes pour les polices optimisées.
• fonts : list[str] : Liste des chemins de chemin de votre système de fichiers local pour faire des fichiers à optimiser. Il peut s'agir de chemins relatifs.

D'autres paramètres ( fontpath , subsetname , verbose , print_stats ) sont identiques à optimise_fonts_for_html_files .

Renvoie:

• un dict où keys() sont les fichiers de police d'origine, et la valeur pour chaque clé est le fichier de police de remplacement qui a été généré

optimise_fonts_for_multiple_text()

Semblable à optimise_fonts_for_html_contents , sauf que l'entrée est une liste des chaînes Python. Le contenu de ces chaînes est utilisé pour générer les glyphes pour les polices optimisées: il y aura un glyphe pour chaque caractère unique dans les chaînes d'entrée (si les polices d'entrée contiennent les glyphes requis.)

Passez une liste de fichiers de police (paramètre fonts ) comme fichiers de police d'entrée à optimiser en fonction du texte.

Paramètres:

• texts : list[str] : Liste des chaînes Python. Les polices générées contiendront les glyphes que ces cordes utilisent.

D'autres paramètres ( fonts , fontpath , subsetname , verbose , print_stats ) et la valeur de retour sont idEnting pour optimise_fonts_for_html_contents .

optimise_fonts()

Ceci est la méthode principale; Toutes les méthodes ci-dessus se retrouvent ici. Il faut une chaîne de texte Unicode Python et une liste de chemins de trajet vers des fichiers pour optimiser, et crée des sous-ensembles de polices contenant uniquement les glyphes uniques requis pour le texte d'entrée.

Paramètres:

• text: str : Une chaîne Unicode Python. Un ensemble de caractères Unicode uniques est généré à partir de cela, et les fichiers de police de sortie contiendront tous les glyphes nécessaires pour rendre cette chaîne correctement (en supposant que les polices contenaient les glyphes pour commencer.)

D'autres paramètres ( fonts , fontpath , subsetname , verbose , print_stats ) et la valeur de retour sont identiques à optimise_fonts_for_html_contents et optimise_fonts_for_multiple_text .

Ligne de commande

L'outil de ligne de commande peut être utilisé autonome ou intégré dans un pipeline de génération de contenu.

Utilisation simple:

python3 fontimize.py file_a.html file_b.html

Cela analyse le HTML, plus tous les fichiers CSS externes référencés, pour trouver à la fois des glyphes et des polices utilisées. Il génère de nouveaux fichiers de police dans le même emplacement que les fichiers de police d'entrée.

python3 fontimize.py --text "The fonts will contain only the glyphs in this string" --fonts "Arial.tff" "Times New Roman.ttf"

Cela génère uniquement les glyphes requis pour la chaîne spécifiée et crée de nouvelles versions d'Arial et Times New Roman au format WOFF2 au même emplacement que les fichiers de police d'entrée.

Référence

Saisir

• Habituellement, passez des fichiers d'entrée. HTML sera analysé pour les CS et les polices référencées; Tous les autres fichiers seront analysés en texte.
• --text "string here" ( -t ): Les glyphes utilisés pour rendre cette chaîne seront ajoutés aux glyphes trouvés dans les fichiers d'entrée, le cas échéant. Vous devez passer des fichiers d'entrée ou du texte (ou les deux), sinon une erreur sera donnée.
• --fonts "a.ttf" "b.ttf" ( -f ): Liste facultative des polices d'entrée. Ceux-ci seront ajoutés à tout référence référencé via HTML / CSS.

Sortir

• --outputdir folder_here ( -o ): répertoire dans lequel placer les fichiers de police générés. Cela doit déjà exister.
• --subsetname MySubset ( -s ): phrase utilisée dans les noms de fichiers de police générés. Il est important de différencier les polices de sortie des polices d'entrée, car (par définition en tant que sous-ensemble), elles sont incomplètes.

Autre

• --verbose ( -v ): sortit des informations détaillées lorsqu'elles traitent
• --nostats ( -n ): n'imprime pas d'informations sur les résultats optimisés à la fin

Tests

Les tests unitaires sont exécutés via tests.py et utilisent les fichiers dans tests . Notez que cela génère de nouveaux fichiers de sortie dans le dossier testsoutput .

Le dossier tests contient plusieurs polices licenciées sous la licence de police SIL Open.

Notes

J'utilise Fontimize dans le cadre d'un générateur de site statique personnalisé pour construire mon site. Il fonctionne comme l'étape finale, optimisant les polices basées sur les fichiers HTML générés stockés sur le disque. Les valeurs de retour de Fontimize - comme les polices qu'il a créées et les fichiers CSS qu'il a analysés - sont ensuite utilisés pour réécrire le CSS et pointer vers les polices nouvellement optimisées.

(Réécrire CSS n'est pas actuellement une fonctionnalité fournie par Fontimize; veuillez créer une demande de problème ou d'extraction si vous le souhaitez. devra le faire explicitement.

• Par défaut, les nouvelles polices sous-ensemble seront nommées avec le suffixe "FontimizersubSet", par exemple, Arial.FontimizerSubset.woff2 . Vous pouvez personnaliser le nom de la police de sous-ensemble à l'aide du paramètre de méthode de subsetname ou du paramètre --subsetname=Foo de ligne de commande. Bien qu'il soit recommandé d'utiliser un nom de sous-ensemble pour éviter de confondre la police optimisée avec la police d'origine (qui contient tous les glyphes), vous pouvez utiliser n'importe quel nom que vous préférez. Le nom par défaut «Fontimizersubset» est simplement une suggestion pour pointer les autres dans cette bibliothèque, s'ils le rencontrent. Il n'est pas nécessaire de conserver ce nom et vous êtes libre d'utiliser une expression différente.

• Pseudo-éléments CSS:
  Fontimiser les Parses CSS pour les deux polices qui sont explicitement utilisées et pour tous les glyphes affichés à l'écran. Cela inclut les glyphes dans les pseudo-éléments CSS comme :before et :after . Si le texte ou les caractères sont définis dans ces pseudo-éléments, ils seront inclus dans les polices sous-ensemble.

• CSS en ligne:
  Fontimize n'analyse pas actuellement CSS en ligne dans les fichiers HTML. Il suppose que le CSS externe est utilisé, ce qu'il trouve via les balises <link> dans la section <head> du document HTML. Fontimize analysera ensuite ces fichiers CSS pour les polices et les glyphes. Si l'analyse de CSS en ligne serait utile, veuillez soulever un problème.

• Caractères supplémentaires:
  Lorsque des citations simples ou doubles sont trouvées dans le texte d'entrée, la police sous-ensemble comprendra également les citations de relevé à gauche et de droite correspondantes. De même, si un tableau de bord est trouvé, le sous-ensemble comprendra à la fois des dashs et des dash.

• C'est vraiment sympa (mais pas obligatoire) que si vous utilisez Fontimizer, pour créer un lien vers https://fontimize.daveon.design/ ou ce repo github. C'est pour pointer d'autres personnes vers l'outil. Merci beaucoup :)