Fontimize

Fontimizar

¡Optimice fácilmente las fuentes (subconjuntas) solo a los glifos específicos necesarios para su texto o HTML!

¿Le preocupa el tamaño de descarga inicial de su sitio web? ¿Requiere megabytes de descargas, y ha optimizado y minificado su CSS e JavaScript e imágenes, pero ha visto algunas fuentes grandes? ¡Fontimizar es para ti! Esta herramienta analiza sus archivos HTML y CSS (o cualquier texto) y crea subconjuntos de fuentes , archivos de fuentes que contienen solo los caracteres o glifos que realmente se usan.

En la práctica, puede reducir el tamaño de su fuente de fuente al 10% o menos del original.

Fontimize usa TTF2Web, y muchas gracias y crédito al autor de esa fantástica biblioteca.

Resultados de ejemplo

Esta biblioteca fue creada originalmente para mi sitio web personal. Utilizó cuatro fuentes TTF por un total de poco más de 1.5 MB. (Esto no es inusual: uno para encabezados, uno para el texto normal con una variante para la cursiva, más un cuarto para una peculiaridad tipográfica, capas de caída).

Después de ejecutar Fontimize, el tamaño total para todas las fuentes combinadas es de 76 kb.

¡1.5MB hasta 76 kb es un ahorro de 95.2%! Esto tuvo un impacto notable en el tiempo inicial para descargar una página en el sitio, además de un inmenso impacto en la representación: antes, la carga inicial del sitio rendería con fuentes serif genéricas, y luego volver a renderizar unos segundos más tarde una vez que las fuentes se habían descargado, lo que se veía realmente mal. Ahora, obtendrá las nuevas fuentes inmediatamente o antes de que se note y el sitio se verá correcto desde el principio.

Uso

Fontimize es una biblioteca de Python, y se puede incluir en su software Python o usado independiente en la línea de comandos.

Biblioteca

Comience por instalar e importar Fontimize:

 $ python3 -m pip install fontimize

En tu guión:

 import fontimize

Para analizar un conjunto de archivos HTML en el disco, y los archivos CSS que usan y exportan nuevas fuentes (de forma predeterminada en la misma carpeta que las fuentes originales) que contienen solo los glifos utilizados en el 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 ...

Referencia completa

optimise_fonts_for_files()

Este es probablemente el método que desea usar.

Optimiza las fuentes de optimización / subconjuntos en función de un conjunto de archivos de entrada en el disco, y (automáticamente) los archivos CSS externos a los que cualquier archivo HTML hace referencia. Los archivos se analizan como HTML si tienen una extensión de archivo .htm o .html (se extrae el texto visible del usuario y se analiza CSS), de lo contrario, los archivos se tratan como texto. Devuelve la lista de archivos CSS encontrados y un mapa del antiguo a los nuevos archivos de fuentes optimizados.

Parámetros:

• html_files : list[str] : lista de rutas, cada una de las cuales es un archivo html. Cada uno será analizado.
• font_output_dir = "" : ruta a donde se deben colocar las fuentes subsettadas. Por defecto, esto está vacío ( "" ), lo que significa generar las nuevas fuentes en la misma ubicación que las fuentes de entrada. Debido a que las nuevas fuentes tienen un nombre diferente (ver subsetname , el siguiente parámetro) no sobrescribirá las fuentes de entrada. No hay verificación si ya existen fuentes de subconjunto antes de que se escriban.
• subsetname = "FontimizeSubset" : las fuentes optimizadas se renombran en el formato OriginalName.FontimizeSubset.woff2 . Es importante diferenciar las fuentes subsettadas de las fuentes originales con todos los glifos. Puede cambiar el nombre del subconjunto de salida a cualquier otra cadena que sea válida en su sistema de archivos.
• verbose : bool = False : si es True , emite información de diagnóstico sobre los archivos CSS, fuentes, etc. que se encuentra y está generando.
• print_stats : bool = True : imprime información para el tamaño total en el disco de las fuentes de entrada y el tamaño total de las fuentes optimizadas y los ahorros en porcentaje. Establezca esto en False si desea que se ejecute en silencio.
• fonts : list[str] = [] : una lista de rutas a archivos de fuentes. Estos se agregan a cualquier fuente que el método encuentre a través de CSS. Por lo general, especificaría esto si está pasando en archivos de texto en lugar de HTML
• addtl_text : str = "" : caracteres adicionales que deben agregarse a los que se encuentran en los archivos

Devoluciones:

• dict[str, typing.Any]
• return_value["css"] -> Lista de archivos CSS únicos que usan los archivos HTML
• return_value["fonts"] -> un dict donde keys() son los archivos de fuentes originales, y el valor para cada clave es el archivo de fuentes de reemplazo que se generó. Puede usar esto para actualizar las referencias a los archivos de fuentes originales. Tenga en cuenta que Fontimizer no reescribe el CSS de entrada.
• return_value["chars"] -> un set de caracteres que se encuentra al analizar la entrada
• return_value["uranges] -> Los rangos de unicode para los mismos caracteres:" U+1000-2000, U+2500-2501 ", etc. Tenga en cuenta

optimise_fonts_for_html_contents()

Similar a optimise_fonts_for_html_files , excepto que la entrada es html como una cadena ( <head>...</head><body>...<body> Ej. No analiza encontrar los archivos CSS utilizados (y, por lo tanto, las fuentes utilizadas), por lo que también debe darle una lista de archivos de fuentes para optimizar.

Parámetros:

• html_contents : list[str] : Lista de cadenas HTML. El texto se extraerá y se utilizará para generar la lista de glifos para las fuentes optimizadas.
• fonts : list[str] : Lista de rutas en su sistema de archivos local a archivos de fuentes para optimizar. Estos pueden ser caminos relativos.

Otros parámetros ( fontpath , subsetname , verbose , print_stats ) son idénticos a optimise_fonts_for_html_files .

Devoluciones:

• un dict donde keys() son los archivos de fuente originales, y el valor para cada clave es el archivo de fuente de reemplazo que se generó

optimise_fonts_for_multiple_text()

Similar a optimise_fonts_for_html_contents , excepto que la entrada es una lista de cadenas de Python. El contenido de esas cadenas se usa para generar los glifos para las fuentes optimizadas: habrá un glifo para cada carácter único en las cadenas de entrada (si las fuentes de entrada contienen los glifos requeridos).

Pase en una lista de archivos de fuentes (parámetro fonts ) como los archivos de fuente de entrada para optimizar en función del texto.

Parámetros:

• texts : list[str] : Lista de cuerdas de Python. Las fuentes generadas contendrán los glifos que usan estas cadenas.

Otros parámetros ( fonts , fontpath , subsetname , verbose , print_stats ) y el valor de retorno son identales para optimise_fonts_for_html_contents .

optimise_fonts()

Este es el método principal; Todos los métodos anteriores terminan aquí. Se necesita una cadena de texto de Python Unicode y una lista de rutas a los archivos de fuentes para optimizar, y crea subconjuntos de fuentes que contienen solo los glifos únicos requeridos para el texto de entrada.

Parámetros:

• text: str : una cadena Python Unicode. A partir de esto se genera un conjunto de caracteres Unicode únicos, y los archivos de fuente de salida contendrán todos los glifos necesarios para representar esta cadena correctamente (suponiendo que las fuentes contenían los glifos para empezar).

Otros parámetros ( fonts , fontpath , subsetname , verbose , print_stats ) y el valor de retorno son idénticos a optimise_fonts_for_html_contents y optimise_fonts_for_multiple_text .

Línea de comando

La herramienta de línea de comandos se puede utilizar independientemente o integrarse en una tubería de generación de contenido.

Uso simple:

python3 fontimize.py file_a.html file_b.html

Esto analiza el HTML, además de cualquier archivo CSS externo referido, para encontrar glifos y fuentes usadas. Genera nuevos archivos de fuentes en la misma ubicación que los archivos de fuente de entrada.

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

Esto genera solo los glifos necesarios para la cadena especificada, y crea nuevas versiones de Arial y Times New Roman en formato Woff2 en la misma ubicación que los archivos de fuente de entrada.

Referencia

Aporte

• Por lo general, pase archivos de entrada. HTML se analizará para CSS y fuentes referenciados; Todos los demás archivos se analizarán como texto.
• --text "string here" ( -t ): los glifos utilizados para representar esta cadena se agregarán a los glifos que se encuentran en los archivos de entrada, si alguno se especifica. Debe pasar archivos de entrada o texto (o ambos), de lo contrario se dará un error.
• --fonts "a.ttf" "b.ttf" ( -f ): Lista opcional de fuentes de entrada. Estos se agregarán a cualquier que se encuentre referenciado a través de HTML/CSS.

Producción

• --outputdir folder_here ( -o ): directorio en el que colocar los archivos de fuentes generados. Esto ya debe existir.
• --subsetname MySubset ( -s ): frase utilizada en los nombres de archivo de fuentes generados. Es importante diferenciar las fuentes de salida de las fuentes de entrada, porque (por definición como subconjunto) están incompletos.

Otro

• --verbose ( -v ): emite información detallada a medida que procesa
• --nostats ( -n ): no imprime información sobre resultados optimizados al final

Pruebas

Las pruebas unitarias se ejecutan a través de tests.py y usan los archivos en tests . Tenga en cuenta que esto genera nuevos archivos de salida dentro de la carpeta testsoutput .

La carpeta tests contiene varias fuentes que tienen licencia bajo la licencia de fuente Open SIL.

Notas

Utilizo Fontimize como parte de un generador de sitio estático personalizado para construir mi sitio. Funciona como el paso final, optimizando las fuentes basadas en los archivos HTML generados almacenados en el disco. Los valores de retorno de Fontimize, como las fuentes que creó y los archivos CSS que analizó, se usan para reescribir el CSS y apuntar a las fuentes recién optimizadas.

(Reescribir CSS no es actualmente una característica proporcionada por Fontimize; cree una solicitud de problema o extracción si desea que sea. Actualmente, la biblioteca genera nuevos archivos de fuentes y devuelve una asignación (ya sea como un diccionario o salida de texto) que muestra los archivos de fuentes anteriores y los nuevos correspondientes. Sin embargo, Fontimize no modifica los archivos CSS existentes, ya que esto es por diseño. para hacerlo explícitamente.

• Por defecto, las nuevas fuentes subsettadas se nombrarán con el sufijo "FontimizizerSubset", por ejemplo, Arial.FontimizerSubset.woff2 . Puede personalizar el nombre de la fuente de subconjunto utilizando el parámetro del método subsetname o el parámetro --subsetname=Foo de línea de comandos. Si bien se recomienda usar un nombre de subconjunto para evitar confundir la fuente optimizada con la fuente original (que contiene todos los glifos), puede usar cualquier nombre que prefiera. El nombre predeterminado "FontimizizerSubset" es simplemente una sugerencia para apuntar a otros de regreso a esta biblioteca, en caso de que la encuentren. No es necesario retener este nombre, y usted es libre de usar una frase diferente.

• Pseudo-elementos CSS:
  Fontimice PARSES CSS para ambas fuentes que se usan explícitamente y para cualquier glifos que se muestren en la pantalla. Esto incluye glifos en pseudo-elementos CSS como :before y :after . Si el texto o los caracteres se definen en estos pseudo-elementos, se incluirán en las fuentes subsettadas.

• CSS en línea:
  Fontimize no analiza actualmente CSS en línea en archivos HTML. Se supone que se está utilizando CSS externo, lo que encuentra a través de las etiquetas <link> en la sección <head> del documento HTML. Fontimize analizará esos archivos CSS para fuentes y glifos. Si el análisis de CSS en línea fuera útil, plantee un problema.

• Personajes adicionales:
  Cuando se encuentran citas simples o dobles en el texto de entrada, la fuente subsettada también incluirá las cotizaciones correspondientes de inclinación izquierda y derecha. Del mismo modo, si se encuentra un DASH, el subconjunto incluirá tanto en las bases como las placas EM.

• Es realmente agradable (pero no es necesario) que si usa Fontimizer, para vincular a https://fontimize.daveon.design/ o este repositorio de GitHub. Eso es señalar a otras personas a la herramienta. Muchas gracias :)