Перехват шрифтов во внешнем интерфейсе

Примечание редактора: Ли Сунфэн, автор этой статьи, является старшим переводчиком технических книг. Он перевел и опубликовал более 40 монографий по техническому и интерактивному дизайну. член технического комитета 360 Front-end и представитель W3C AC.

Зачем перехватывать шрифты?

Как мы все знаем, по сравнению с английскими шрифтами китайские шрифты по своей сути «монстры». Английские шрифты в две-три сотни килобайт уже очень большие, а китайские шрифты в несколько мегабайт или более десяти мегабайт считаются маленькими. С одной стороны, китайские шрифты содержат очень большое количество глифов, часто тысячи или даже десятки тысяч, в то время как английские шрифты должны содержать только десятки основных символов и символов, даже если они поддерживают несколько языков и вариантов символов, при этом вместимость 3000. Несколько глифов уже очень большие. С другой стороны, изгибы и повороты китайских глифов очень сложны.В дизайне векторного шрифта на основе контура обычно больше контрольных точек для управления кривой китайских глифов, чем в английском, поэтому объем требуемых данных больше. , что также приведет к файлам шрифтов swell.

В практике front-end разработки для достижения каких-то особых визуальных эффектов часто необходимо использовать какие-то специальные шрифты, а установить эти шрифты на компьютер пользователя практически невозможно, в это время обычно приходится использовать Технология веб-шрифтов, позволяющая браузеру динамически загружать наши пользовательские шрифты. Однако китайские шрифты очень большие, и во многих случаях нереально загрузить определенный файл шрифта «полностью». Особенно для некоторых динамических страниц, и только несколько символов на странице используют шрифт. Конечно, не каждая страница будет использовать все символы файла шрифта, а полная загрузка сама по себе крайне расточительна.

Исследования показывают, что 3500 часто используемых китайских иероглифов (количество китайских иероглифов, необходимых для освоения в 9-м классе обязательного образования в Китае) могут покрывать 99,8% повседневного использования китайских иероглифов:

500 слов (78,53202%)
1000 слов (91,91527%)
1500 слов (96,47563%)
2000 слов (98,38765%)
2500 слов (99,24388%)
3000 слов (99,63322%)
3500 слов (99,82015%)

Видно, что степень охвата 500 наиболее часто используемых китайских иероглифов достигла 78%. Поэтому «полная» загрузка определенного шрифта, особенно китайского, не только тратит трафик и время в текущем сетевом окружении, но и совершенно не нужна. В это время мы можем перехватывать фрагменты шрифта по символам, используемым на веб-странице.Эта технология называется по-английски subset, то есть «подмножество».

В этой статье сначала кратко рассматриваются технические характеристики пользовательских веб-шрифтов, а затем на примерах представлены две широко используемые интерфейсные технологии перехвата шрифтов. Сначала в CSSunicode-rangeАтрибут, мы называем его «технологией Soft Interception», поскольку он только делает «мягкую ссылку», указывая на подмножество на основе локальных существующих шрифтов или шрифтов, уже загруженных браузером, и не может действительно уменьшить количество загруженных файлов по браузеру. Размер. Далее - инструмент командной строки узла Glyphhanger, который мы называем «Технология жесткого перехвата», то есть относительно небольшое подмножество шрифтов отделено от «полного» шрифта на стороне сервера и сделано в веб-шрифт через веб Сервер или CDN. Отправляется в браузер.

Будь то «мягкий перехват» или «жесткий перехват», веб-шрифты и@font-faceправило. Поэтому нам нужно сначала понять основной синтаксис веб-стандарта.

Веб-шрифты с @font-face

Чтобы выйти за пределы ограничений «веб-безопасных шрифтов» и использовать на веб-страницах некоторые шрифты, которые вряд ли будут установлены на компьютерах пользователей, Microsoft взяла на себя инициативу, предложив@font-faceправило. Позже это правило вошло в W3C.CSS Fonts Module Level 3модуль, поэтому во внешнем интерфейсе обычно используется технология пользовательского веб-шрифта:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* 兼容IE9 */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* 最新浏览器 */
       url('webfont.woff') format('woff'), /* 较新浏览器 */
       url('webfont.ttf')  format('truetype'), /* Safari、Android、iOS */
       url('webfont.svg#svgFontName') format('svg'); /* 早期iOS */
}

Источник примера кода: https://css-tricks.com/snippets/css/using-font-face/

Конечно, приведенный выше код — это решение, совместимое почти со всеми браузерами. Года два назад, в 2016-м, из-за быстрой смены версий браузеров, реалистичнее было написать следующее:

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Если вы хотите быть совместимым с большим количеством браузеров, добавьте тот, который поддерживается почти всеми браузерами.ttfФормат кажется более безопасным:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff'),
       url('myfont.ttf') format('truetype');
}

Однако наша конечная цель — написать его так, чтобы использовать толькоwoff2Этот самосжатый формат:

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2');
}

С технической точки зрения, помимо непосредственного использования@font-face, вы также можете использовать@importправила илиlinkИмпорт или загрузка элемента содержит@font-faceЗаявленный внешний файл:

// 导入
@import url(//fonts.googleapis.com/css?family=Open+Sans);
// 或者引用
<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
// 实际使用
body {
  font-family: 'Open Sans', sans-serif;
}

Откройте Google Fonts и посмотрите: https://fonts.googleapis.com/css?family=Open+Sans.

Выше приведены все технические спецификации относительно того, когда можно перейти на использование только сжатых форматов, оптимизированных для веб-шрифтов.woff2, должно быть только вопросом времени.

Изучив основные технические характеристики и грамматику, а также прояснив будущее направление, мы приступим к реальному бою. Первый взглядCSS Fonts Module Level 3определяется с@font-faceиспользуется в сочетании с правиламиunicode-rangeсвойства, а затем познакомить вас с известной иностранной компанией по веб-разработкеFilament Group, Inc.Запущен инструмент перехвата шрифтовglyphhanger.

unicode-range

unicode-rangeХотя атрибуты можно считать технологией «перехвата шрифтов», это «мягкий перехват», а не «жесткий перехват». Это похоже на ярлык без реального уменьшения размера файла шрифта, который браузер должен загрузить.

Как подсказывает название,unicode-rangeИспользуется для указания диапазона кодовых точек Unicode для символов, содержащихся в пользовательском шрифте. Синтаксис следующий:

// CSS
@font-face {
  font-family: 'Ampersand';
  src: local('Times New Roman');
  unicode-range: U+26;
}
div {
  font-size: 4em;
  font-family: Ampersand, Helvetica, sans-serif;	
}
// HTML
<div>Me & You = Us</div>

Пример кода из: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/unicode-range

над@font-faceПравило настраивает шрифт с именем «Амперсанд» (англ. ampersand), который «перехвачен» из местного шрифта Times New Roman, и этот шрифт содержит только один символ:U+26(26— шестнадцатеричный код Unicode для английского амперсанда, а соответствующее десятичное значение — 38).

HTMLdivэлемент согласноfont-family, пользовательские шрифты Ampersand (Times New Roman, с засечками), Helvetica (без засечек) иsans-serif(без засечек) семейство шрифтов. Фактический эффект от применения следующий:

Кодировка Unicode была расширена до 17 плоскостей кодирования, каждая из которых имеет емкость 65 536 и общую емкость 1 114 112 кодовых точек, из которых фактически выделено только 128 237, что составляет около 12%. Так что в обозримом будущем в Unicode достаточно места для символов всех цивилизаций на Земле.

См. пример китайского шрифта. Предположим, мы используем специальный шрифт, чтобы выделить самое известное предложение в знаменитом стихотворении Ван Бо «Предисловие к павильону короля Дэна», одного из «Четырех героев ранней династии Тан»: «Закат и одинокий орел летят вместе, а осенняя вода такого же цвета, как небо».

Вы можете сначала преобразовать это известное предложение (включая знаки препинания) в кодовые точки Unicode:

Функция транскодирования строки JavaScript может использовать следующие точки:
function text2point(t) {
   return t.split('').map(c => 'u+'+c.charCodeAt().toString(16)).join(',')
}

Затем используйте «Libian SC» в качестве исходного шрифта и настройте имя «Libian SC».customшрифт, примените его к.emphasisэлемент:

// CSS
@font-face {
  font-family: custom;
  src: local(Libian SC);
  unicode-range: u+843d,u+971e,u+4e0e,u+5b64,u+9e5c,u+9f50,u+98de,u+ff0c,
      			u+79cb,u+6c34,u+5171,u+957f,u+5929,u+4e00,u+8272,u+3002;
  font-weight: 500;
}
.emphasis {
  font-family: custom;
}
// HTML
<!--其他句子-->
<span class="emphasis">落霞与孤鹜齐飞，秋水共长天一色。</span>
<!--其他句子-->

Обратите внимание, что список кодовых точек в приведенном выше коде был искусственно обернут для удобства набора текста и чтения. Не переносите искусственно строку в реальном использовании, чтобы избежать грамматических ошибок. То же самое касается примера кода ниже.

Результат выглядит следующим образом:

На данный момент мы обнаружили, что стиль пунктуации (запятые и точки) несовместим с другим текстом, в котором использовался шрифт «PingFang SC» (на Mac). Можно ли просто удалить кодовые точки запятой и точки из предыдущего списка кодовых точекu+ff0cа такжеu+3002? Программа в Safari 12, Firefox 62 возможна, использование запятых и периодов наследует «Ping Fang» после удаления кода шрифта точек, но не работает в 69 хрома.

Кроме того, кажется, что в Chrome есть ошибка. Предполагая, что указанная выше кодовая точка не удалена, а символ, не включенный в пользовательский шрифт, вводится непосредственно слева от пунктуации, Chrome заставит символ отображаться в пользовательском шрифте. Кажется, что в реализациях браузеров все еще есть несоответствия. Time, IE и Edge под платформу Windows не тестировались, читатели могут протестировать их самостоятельно.

В любом случае, мы можем решить эту проблему, определив собственный шрифт, который содержит только два символа, запятую и точку:

@font-face {
  font-family: punc;
  src: local(PingFang SC);
  unicode-range: u+ff0c,u+3002;
}
.emphasis {
  font-family:punc, custom;
}

Таким образом, даже не удаляяcustomКодовая точка в операторе Chrome, Safari и Firefox также может отображать запятые и точки шрифтом «яблочный квадрат»:

Будьте осторожны, не пытайтесь настроить на основе английских шрифтов.puncшрифт, потому что английские шрифты не содержат сопоставлений с соответствующими кодовыми точками китайской пунктуации.

Хотя этот пример, очевидно, самодельный, «специальная обработка шрифта для определенной части китайских иероглифов в китайском контенте или специальная обработка шрифта для некоторых символов в английском шрифте» — это именно то, чтоunicode-rangeЭта «технология мягкого перехвата» является наиболее подходящим сценарием применения. Болееunicode-rangeсодержание, я рекомендую всем взглянуть на статью Чжан Синьсюй«Символы диапазона CSS Unicode используют font-face для настройки шрифтов»: (https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/).

использоватьunicode-rangeПримечания:

unicode-rangeможет получить
- Единая кодовая точка:U+26(илиu+26)
- Диапазон кодовых точек:U+0-7F,U+0025-00FF
- Диапазоны подстановочных знаков:U+4??, эквивалентноU+400-U+4FF
- Несколько значений, разделенных запятыми:U+0025-00FF, U+4??
unicode-rangeЗначение по умолчанию:U+0-10FFFF, то есть все кодировки символов Unicode
unicode-rangeЗначением является литерал кодовой точки или список литералов,не строка
- правильный:unicode-range: u+ff0c,u+3002;
- ошибка:unicode-range: "u+ff0c,u+3002";
unicode-rangeЗначение не может содержать синтаксические ошибки, такие как приведенные выше.не строка, и без лишних запятых:u+ff0c,u+3002,;(с лишней запятой в конце) и т. д., следствием синтаксической ошибки является то, что пользовательский шрифт станет псевдонимом исходного шрифта, а не подмножеством на основе перехвата исходного шрифта. (конечно, по@font-faceОпределение псевдонима существующей коллекции шрифтов также является практическим методом CSS.Вы можете обратиться к предыдущей статье г-на Чжана. )
Обязательно используйте правильные символы при преобразовании в кодовые точки, например "鹜" в предыдущем примере (u+9e5c) Не ошибайтесь, используя «жадные» (u+9a9b).

оunicode-rangeЭто введение в использование этой «техники мягкого перехвата». Далее мы представляем «жесткий инструмент перехвата»: glyphhanger.

glyphhanger

глифхангер этоЗак Лезерман (https://www.zachleat.com/web/)дляФиламент Групп (https://www.filamentgroup.com)написанный один.ttfПреобразуйте инструменты командной строки в форматы веб-шрифтов, такие как WOFF/WOFF2, вы можете:

Сканируйте удаленные или локальные файлы и анализируйте содержащийся в них текст
Изменение порядка и преобразование результатов анализа в кодовые точки Unicode
Создать подмножество соответствующего формата на основе указанного исходного шрифта (требуется установка другого инструмента, описанного ниже)
Он также генерирует@font-faceCSS-файл для правил

Этот инструмент очень практичен и удобен.Давайте продемонстрируем несколько типичных применений glyphhanger в процессе создания веб-шрифтов.

Сначала установите глобально:

npm install -g glyphhanger

Использование 1: Измените древнее известное предложение Ван Бо на «Стиль песни Сыюань».

Перейдите в каталог fontSubsetInAction, содержащий пример страницы, и выполните следующую команду:

➜ fontSubsetInAction glyphhanger http://127.0.0.1:8080/index.html --family='custom' --subset=SourceHanSerifCN-Light.ttf --formats=woff2

U+3002,U+4E00,U+4E0E,U+5171,U+5929,U+5B64,U+6C34,U+79CB,U+8272,U+843D,U+957F,U+971E,U+98DE,U+9E5C,U+9F50,U+FF0C
Writing CSS file: SourceHanSerifCN-Light.css
Subsetting SourceHanSerifCN-Light.ttf to SourceHanSerifCN-Light-subset.woff2 (was 12.44 MB, now 3.57 KB)

Здесь в glyphhanger передаются 4 параметра.

Удаленный файл для анализа (вот локальный веб-сервис):http://127.0.0.1:8080/index.html
--family='custom'Указывает на анализ только тех страниц, которые применяются в вышеуказанномfont-family: custom;элементы правила
--subset=SourceHanSerifCN-Light.ttfУкажите используемый исходный шрифт, здесь "Source Han Serif" (Исходный хан с засечками)
--formats=woff2Укажите целевой формат подмножества шрифтов, которые вы хотите создать, здесь WOFF2

Glyphhanger сначала выводит соответствующие кодовые точки Unicode (включая запятые и точки). Затем в текущем каталоге создается файл с именем SourceHanSerifCN-Light.css. Вывод после этого показывает, что перехваченный шрифт называется «SourceHanSerifCN-Light-subset.woff2», размер исходного файла шрифта составляет 12,44 МБ, а файла подмножества — 3,57 КБ. 16 китайских иероглифов занимают 3,57 КБ, а каждый символ занимает в среднем 228 байт, страшно, правда? !

Однако по сравнению с 12,44 МБ 3,57 КБ уже очень мало. Затем взгляните на файл CSS, который нам помог создать glyphhanger:

/* This file was automatically generated by GlyphHanger 3.0.3 */
@font-face {
  font-family: custom;
  src: url(SourceHanSerifCN-Light-subset.woff2) format("woff2");
  unicode-range: U+3002,U+4E00,U+4E0E,U+5171,U+5929,U+5B64,U+6C34,U+79CB,
      			U+8272,U+843D,U+957F,U+971E,U+98DE,U+9E5C,U+9F50,U+FF0C;
}

Вы можете использовать его напрямую, что намного проще, чем генерировать кодовые точки вручную. Результат выглядит следующим образом:

Использование 2: Анализ подмножества китайских иероглифов, используемых на веб-страницах.

Некоторые читатели, возможно, не заметили, что кодовые точки, выдаваемые glyphhanger в приведенном выше примере, отсортированы от меньшего к большему в соответствии с порядком каждого символа в кодировке Unicode. Кроме того, эти кодовые точки сортируются после автоматической дедупликации.

«Луоксиа и Одинокие птицы летят вместе, а осенние воды одного цвета.» Повторяющихся слов нет, давайте рассмотрим следующий пример:

➜  fontSubsetInAction glyphhanger https://lisongfeng.cn/post/dive-into-async-function.html --string

 "#$&'()*+,-./0123456789:;<=>?ACDEFGHIJKLMNOPQRSTUVWXY[]`abcdefghijklmnopqrstuvwxy{|} ©«»—“”…、。一丁三上下不与且两个中串为主么义之乎乘也书了事二于互些交人什仅今介从代以们件任会伟传似但位低住体何作你使例供依便信修倍候值假做停催像儿充先兑入全兮关其典内册再写决况准出函分切列则刚创初利别到制刻前力办功加务动助努包化区升半协单占即却原去参又及反发取受变口句另只叫可各合同名后向吗吧含启呀员呢周味命和品哈哉响哎哥哦啊啥啦喽嘛器回因困围图在地坑块型基塞境增处备复外多大夫失头奇套好如始姐媒媲子字存它完定实家容对导封将小少尔尝就尾层屈展属山崩嵌工己已布带帮常干年并序库应底度建开异式引张强当彻往征待很得循微心必快念态怎思急性总恢息悉悖悲情想意感成我或户所手才打执扩扰找承把抛抢护抽拒括拼拿持按挠捕换据探接控推描提摸操擎支收改效救数文料断新方无既早时明易是显普景智暂更替最月有未末本机杂束条来构析果某查标样核根格案梦检概模次止正此步段每比毕毫永求没法注洞活流浏消涩深添溃满漏演漫点烦烫然照熟版特状独狱环现理甚甜生用由界疼疾白的目直相省看真眼着知码础确示神种秒积称程稍穷立竟端笔符第笼等答简算管箭类糖系索级纯线组细终绍经结给绝绞统继续维综编网置美翻考者而聪肉背能脚自至致节芋苦荒获虽蛮行补表被装要见规览解触计认让议记讲论设访证评译试话该详语误说请诺读调谋象负责败质费资赋越足踩身转载较辑达迅过迈运返还这进远迭述退送适逆逐递通速造逻遍道那部都释里重量鉴针链错键长问闲间队阻际限除随隐集需非靠面页顺须题风饰饱首香驾验高麻默！（），：；？～

Первый параметр — это «настоящая» удаленная веб-страница:https://lisongfeng.cn/post/dive-into-async-function.html, — это URL-адрес статьи, которую я написал ранее: «Младшие брат и сестра, приходите и попробуйте синтаксический сахар асинхронной функции». Полный текст статьи составляет почти 5000 слов, но видно, что после анализа и дедупликации фактически используются только 604 китайских символа. Также здесь используется еще один параметр--stringПусть glyphhanger преобразует кодовые точки Unicode в строковый вывод, отсортированный по кодовым точкам от наименьшего к наибольшему.

Дедупликация строк на самом деле очень проста, можно выполнить следующую простую функцию JavaScript:

function textEliminateDuplicationAndSorting(text) {
    return text.split('').filter((value, index, self) => { 
      return self.indexOf(value) === index;
    }).sort().join('')
}

Использование 3: Укажите текст или кодовые точки для создания подмножеств шрифтов.

Конечно, если у вас есть существующий текст или кодовые точки, вы также можете просто позволить glyphhanger сгенерировать для вас подмножество соответствующего исходного шрифта и файлов CSS. Например, я хочу, чтобы «рыбацкая лодка поет поздно, звук бедного берега Пэнли, гуси пугаются холода, и звук ломает реку Хэнъян». ":

➜  fontSubsetInAction glyphhanger --whitelist="落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨，雁阵惊寒，声断衡阳之浦。" --subset=SourceHanSerifCN-Light.ttf --css

U+3002,U+4E00,U+4E0E,U+4E4B,U+5171,U+54CD,U+5531,U+58F0,U+5929,U+5B64,U+5BD2,U+5F6D,U+60CA,U+65AD,U+665A,U+6C34,U+6D66,U+6E14,U+6EE8,U+79CB,U+7A77,U+821F,U+8272,U+843D,U+8821,U+8861,U+957F,U+9633,U+9635,U+96C1,U+971E,U+98DE,U+9E5C,U+9F50,U+FF0C
Subsetting SourceHanSerifCN-Light.ttf to SourceHanSerifCN-Light-subset.ttf (was 12.44 MB, now 13.02 KB)
Subsetting SourceHanSerifCN-Light.ttf to SourceHanSerifCN-Light-subset.zopfli.woff (was 12.44 MB, now 9.13 KB)
Subsetting SourceHanSerifCN-Light.ttf to SourceHanSerifCN-Light-subset.woff2 (was 12.44 MB, now 7.45 KB)
Writing CSS file: SourceHanSerifCN-Light.css

@font-face {
  src: url(SourceHanSerifCN-Light-subset.woff2) format("woff2"), 
  		url(SourceHanSerifCN-Light-subset.zopfli.woff) format("woff"), 
  		url(SourceHanSerifCN-Light-subset.ttf) format("truetype");
  unicode-range: U+3002,U+4E00,U+4E0E,U+4E4B,U+5171,U+54CD,U+5531,U+58F0,U+5929,
  			U+5B64,U+5BD2,U+5F6D,U+60CA,U+65AD,U+665A,U+6C34,U+6D66,U+6E14,
			U+6EE8,U+79CB,U+7A77,U+821F,U+8272,U+843D,U+8821,U+8861,U+957F,
			U+9633,U+9635,U+96C1,U+971E,U+98DE,U+9E5C,U+9F50,U+FF0C;
}

на этот раз использовать--whitelistПараметр передает китайские иероглифы для перехвата, которые опущены.--formmats,повысился--cssпараметр.

Как видно из результатов, glyphhanger по-прежнему выполняет дедупликацию, транскодирование и сортировку текста. Более того, без указания--formatsна случай, если.ttf,woffа такжеwoff2Подмножество шрифтов для трех форматов для улучшения совместимости с браузерами. Наконец, в дополнение к регулярному созданию файлов CSS,--cssПараметр также заставляет glyphhanger выводить содержимое файла CSS на консоль для удобного копирования.

Однако обратите внимание, что ни файл CSS, ни вывод не содержатfont-familyсвойство, то есть без названия пользовательского шрифта (custom), необходимо добавлять вручную при использовании. Хорошо, вот результаты:

установить pyftsubset

Сам Glyphhanger занимается только просмотром и анализом веб-страниц, а для фактического перехвата шрифтов используется известный пакет Python.fonttools:GitHub.com/инструменты для шрифтов/…. Способ установки следующий:

pip install fonttools

# Additional installation for --flavor=woff2
git clone https://github.com/google/brotli
cd brotli
python setup.py install

# Additional installation for --flavor=woff --with-zopfli
git clone https://github.com/anthrotype/py-zopfli
cd py-zopfli
git submodule update --init --recursive
python setup.py install

В конце статьи, для справки, мы даем справочную информацию о glyphhanger, вы можете изучить более интересное использование самостоятельно:

➜  fontSubsetInAction glyphhanger -h
glyphhanger error: requires at least one URL or whitelist.

usage: glyphhanger ./test.html
       glyphhanger http://example.com
       glyphhanger https://google.com https://www.filamentgroup.com
       glyphhanger http://example.com --subset=*.ttf
       glyphhanger --whitelist=abcdef --subset=*.ttf

arguments:
  --version
  --whitelist=abcdef
       A list of whitelist characters (optionally also --US_ASCII).
  --string
       Output the actual characters instead of Unicode code point values.
  --family='Lato,monospace'
       Show only results matching one or more font-family names (comma separated, case insensitive).
  --json
       Show detailed JSON results (including per font-family glyphs for results).
  --css
       Output a @font-face block for the current data.
  --subset=*.ttf
       Automatically subsets one or more font files using fonttools `pyftsubset`.
  --formats=ttf,woff,woff2,woff-zopfli
       woff2 requires brotli, woff-zopfli requires zopfli, installation instructions: https://github.com/filamentgroup/glyphhanger#installing-pyftsubset

  --spider
       Gather local URLs from the main page and navigate those URLs.
  --spider-limit=10
       Maximum number of URLs gathered from the spider (default: 10, use 0 to ignore).
  --timeout
       Maximum navigation time for a single URL.

О Еженедельнике Циу

«Qiwu Weekly» — это сообщество передовых технологий, управляемое профессиональной командой «Qiwu Troupe» компании 360. Подписавшись на официальный аккаунт, вы можете отправить нам статью, отправив ссылку прямо на фон.