Fontimize

Fontimize

Легко оптимизируйте (подмножество) шрифты только к конкретным глифам, необходимым для вашего текста или HTML!

Вы беспокоитесь о первоначальном размере загрузки вашего сайта? Требование мегабит загрузок, и вы оптимизировали и минимизировали свои CSS, JavaScript и изображения, но обнаружили несколько больших шрифтов? Fontimize для вас! Этот инструмент анализирует ваши HTML -файлы и CSS (или любой текст) и создает подмножества шрифтов , файлы шрифтов, которые содержат только символы или глифы, которые фактически используются.

На практике вы можете сократить размер загрузки шрифта до 10% или менее оригинала.

Fontimize использует TTF2WEB, и большое спасибо автору этой фантастической библиотеки.

Пример результатов

Эта библиотека была первоначально создана для моего личного веб -сайта. Он использовал четыре шрифта TTF на общую сумму чуть более 1,5 МБ. (Это не необычно: один для заголовков, один для обычного текста с вариантом курсива, плюс четвертый для типографской причуды, капельницы.)

После запуска Fontimize общий размер для всех комбинированных шрифтов составляет 76 КБ.

1,5 МБ до 76 КБ - это экономия 95,2%! Это оказало заметное влияние на начальное время для загрузки страницы на сайте, плюс огромное влияние на рендеринг: до начальной нагрузки сайта рендерировалась с общими шрифтами с засечками, а затем повторно рендеринг через несколько секунд, как только загружались шрифты, что выглядело очень плохо. Теперь вы получите новые шрифты немедленно или до того, как вы заметите, и сайт с самого начала будет выглядеть правильно.

Использование

Fontimize-это библиотека Python, которая может быть включена в ваше программное обеспечение Python или используется отдельно в командной строке.

Библиотека

Начните с установки и импорта Fontimize:

 $ python3 -m pip install fontimize

В вашем сценарии:

 import fontimize

Проанализировать набор файлов HTML на диске и файлов CSS, которые они используют, и экспортировать новые шрифты (по умолчанию в той же папке, что и исходные шрифты), содержащие только глифы, используемые в 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 ...

Полная ссылка

optimise_fonts_for_files()

Это, вероятно, метод, который вы хотите использовать.

Оптимизируют / подмножества шрифты на основе набора входных файлов на диске и (автоматически) файлы внешних CSS, которые ссылается на любые файлы HTML. Файлы анализируются как HTML, если у них есть расширение файла .htm или .html (пользовательский текст извлекается, а CSS анализируется), в противном случае файлы рассматриваются как текст. Возвращает список найденных файлов CSS и карту старых до новых оптимизированных файлов шрифтов.

Параметры:

• html_files : list[str] : список путей, каждый из которых представляет собой файл HTML. Каждый будет проанализирован.
• font_output_dir = "" : Путь туда, где должны быть размещены подмножество шрифтов. По умолчанию это пусто ( "" ), что означает генерировать новые шрифты в том же месте, что и входные шрифты. Поскольку новые шрифты имеют другое имя (см. subsetname , следующий параметр), вы не будете перезаписать входные шрифты. Нет никакой проверки, если они уже будут записаны.
• subsetname = "FontimizeSubset" : оптимизированные шрифты переименованы в Format OriginalName.FontimizeSubset.woff2 . Важно отличить подмножество шрифтов от оригинальных шрифтов со всеми глифами. Вы можете изменить имя выходного подмножества на любую другую строку, которая действительна в вашей файловой системе.
• verbose : bool = False : если True , излучает диагностическую информацию о файлах CSS, шрифтах и т. Д., Которые он найден и генерирует.
• print_stats : bool = True : печатает информацию для общего размера на диске входных шрифтов и общего размера оптимизированных шрифтов и экономии в процентах. Установите это на False , если вы хотите, чтобы он работал молча.
• fonts : list[str] = [] : список путей к файлам шрифтов. Они добавляются в любые шрифты, которые метод находит через CSS. Вы обычно указываете это, если вы передаете в текстовых файлах, а не HTML
• addtl_text : str = "" : дополнительные символы, которые должны быть добавлены в те, которые найдены в файлах

Возвращает:

• dict[str, typing.Any]
• return_value["css"] -> Список уникальных файлов CSS, которые используют файлы HTML
• return_value["fonts"] -> dict , где keys() -исходные файлы шрифтов, а значение для каждого ключа -это сгенерированный файл шрифта для замены. Вы можете использовать это для обновления ссылок на исходные файлы шрифтов. Обратите внимание, что Fontimizer не переписывает входные CSS.
• return_value["chars"] -> set символов, найденных при анализе ввода
• return_value["uranges] -> Диапазоны Unicode для одних и тех же символов:" U+1000-2000, U+2500-2501 "и т. Д. Примечание. Второе число в каждой паре не имеет« U+»-это соответствует требуемому формату ввода для библиотеки шрифтов.

optimise_fonts_for_html_contents()

Аналогично optimise_fonts_for_html_files , за исключением того, что ввод HTML как строка (например <head>...</head><body>...<body> ). Он не разрабатывает, чтобы найти используемые файлы CSS (и, следовательно, используются шрифты), поэтому вам также необходимо дать ему список файлов шрифтов для оптимизации.

Параметры:

• html_contents : list[str] : список строк HTML. Текст будет извлечен и используется для создания списка глифов для оптимизированных шрифтов.
• fonts : list[str] : список путей в вашей локальной файловой системе в файлы шрифтов для оптимизации. Это могут быть относительные пути.

Другие параметры ( fontpath , subsetname , verbose , print_stats ) идентичны optimise_fonts_for_html_files .

Возвращает:

• dict , где keys() - исходные файлы шрифтов, а значение для каждого ключа - это файл замены шрифта, который был сгенерирован

optimise_fonts_for_multiple_text()

Аналогично optimise_fonts_for_html_contents , за исключением того, что ввод является списком строк Python. Содержание этих строк используется для генерации глифов для оптимизированных шрифтов: будет Glyph для каждого уникального символа в входных строках (если входные шрифты содержат необходимые глифы.)

Пропустите список файлов шрифтов (параметр fonts ) в качестве файлов входных шрифтов для оптимизации на основе текста.

Параметры:

• texts : list[str] : Список струн Python. Сгенерированные шрифты будут содержать глифы, которые используют эти строки.

Другие параметры ( fonts , fontpath , subsetname , verbose , print_stats ) и возвращаемое значение являются для optimise_fonts_for_html_contents .

optimise_fonts()

Это основной метод; Все методы выше заканчиваются здесь. Требуется строка текста Python Unicode и список путей к файлам шрифтов для оптимизации, и создает подмножества шрифтов, содержащие только уникальные глифы, необходимые для входного текста.

Параметры:

• text: str : Строка Python Unicode. Из этого генерируется набор уникальных символов Unicode, и выходные файлы шрифтов будут содержать все глифы, необходимые для правильного отображения этой строки (при условии, что шрифты содержали глифы с начала.)

Другие параметры ( fonts , fontpath , subsetname , verbose , print_stats ) и возвращаемое значение идентичны optimise_fonts_for_html_contents и optimise_fonts_for_multiple_text .

Командная строка

Инструмент командной линии может использоваться автономным или интегрированным в конвейер генерации контента.

Простое использование:

python3 fontimize.py file_a.html file_b.html

Это анализирует HTML, а также любые ссылки на внешние файлы CSS, чтобы найти как Glyph, так и используемые шрифты. Он генерирует новые файлы шрифтов в том же месте, что и входные файлы шрифтов.

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

Это генерирует только глифы, необходимые для указанной строки, и создает новые версии Arial и Times New Roman в формате Woff2 в том же месте, что и файлы входных шрифтов.

Ссылка

Вход

• Обычно передавайте входные файлы. HTML будет проанализирован для ссылки на CSS и шрифты; Все остальные файлы будут анализироваться как текст.
• --text "string here" ( -t ): Глифы, используемые для визуализации этой строки, будут добавлены в глифы, найденные в входных файлах, если таковые имеются. Вы должны передавать либо входные файлы, либо текст (или оба), в противном случае будет дана ошибка.
• --fonts "a.ttf" "b.ttf" ( -f ): необязательный список входных шрифтов. Они будут добавлены в любой найденный в HTML/CSS.

Выход

• --outputdir folder_here ( -o ): каталог, в котором можно разместить сгенерированные файлы шрифтов. Это уже должно существовать.
• --subsetname MySubset ( -s ): фраза, используемая в сгенерированных именах файлов шрифта. Важно дифференцировать выходные шрифты от входных шрифтов, потому что (по определению как подмножество) они неполны.

Другой

• --verbose ( -v ): выводит подробную информацию, когда она обрабатывает
• --nostats ( -n ): не печатает информацию об оптимизированных результатах в конце

Тесты

Модульные тесты запускаются через tests.py и используют файлы в tests . Обратите внимание, что это генерирует новые выходные файлы в папке testsoutput .

Папка tests содержит несколько шрифтов, которые лицензированы по лицензии SIL Open Font.

Примечания

Я использую Fontimize как часть пользовательского статического генератора сайтов для создания моего сайта. Он работает как последний шаг, оптимизируя шрифты на основе сгенерированных файлов HTML, хранящихся на диске. Возвратные значения из Fontimize - такие как созданные шрифты, и анализируемые файлы CSS, которые он проанализировал - затем используются для переписывания CSS и указывать на недавно оптимизированные шрифты.

(Переписывание CSS в настоящее время не является функцией, предоставляемой Fontimize; пожалуйста, создайте проблему или запрос на привлечение, если вы хотите, чтобы это было. Необходимо сделать это явно.

• По умолчанию новые подмножество шрифтов будут названы с суффиксом «fontimizersubset», например, Arial.FontimizerSubset.woff2 . Вы можете настроить имя шрифта подмножества, используя параметр метода subsetname или параметр- --subsetname=Foo . Хотя рекомендуется использовать имя подмножества, чтобы избежать путаницы оптимизированного шрифта с исходным шрифтом (который содержит все глифы), вы можете использовать любое имя, которое вы предпочитаете. Имя по умолчанию «fontimizersubset» - это просто предложение, чтобы указать других на эту библиотеку, если они столкнутся с этим. Нет необходимости сохранять это имя, и вы можете использовать другую фразу.

• CSS псевдо-элементы:
  Процедуры анализируются CSS как для явно используемых шрифтов, так и для любых глифов, отображаемых на экране. Это включает в себя глифы в псевдо-элементах CSS, такие как :before и :after . Если текст или символы определены в этих псевдо-элементах, они будут включены в подмножество шрифтов.

• Встроенный CSS:
  Fontimize в настоящее время не разрабатывает встроенные CSS в HTML -файлах. Предполагается, что используется внешний CSS, который он находит через теги <link> в разделе <head> документа HTML. Затем Fontimize анализирует эти файлы CSS для шрифтов и глифов. Если будет полезен рецензирования CSS, пожалуйста, поднимите проблему.

• Дополнительные персонажи:
  Когда в входном тексте обнаруживаются одиночные или двойные кавычки, подмножество шрифта также будет включать в себя соответствующие кавычки для левой и правой. Точно так же, если будет найдена черта, подмножество будет включать в себя как входные, так и EM-Dashes.

• Это действительно приятно (но не требуется), что если вы используете Fontimizer, чтобы ссылаться на https://fontimize.daveon.design/ или в этот репо. Это должно указать других людей на инструмент. Большое спасибо :)