Данные символов

Thykes Symbols — вариативный шрифт символов. Он опубликован по адресу https://thykes.com/v0/symbols/ вместе с контурами в JSON для приложений и инструментов, которые читают набор по сети.

Компоненты Thykes эти файлы не используют. Их глифы берутся из шрифта иконок, который загружает thykes.js; см. Иконки.

Файлы

URL	Что в нём
`/v0/symbols/manifest.json`	Оглавление: версия, оси шрифта, все символы и хеш SHA-256 каждого файла шрифта
`/v0/symbols/ThykesSymbols.woff2`	Вариативный шрифт, сжатый для веба
`/v0/symbols/ThykesSymbols.ttf`	Тот же шрифт без сжатия, для инструментов, которые не читают WOFF2
`/v0/symbols/figma/<name>.json`	Контуры одного символа во всех весах и масштабах, например `figma/trash.json`. Из этих же файлов собрана документация набора в Figma

Каждый файл можно запрашивать с любого источника (Access-Control-Allow-Origin: *), и он отдаётся с Cache-Control: public, max-age=0, must-revalidate, поэтому браузер при каждой загрузке проверяет, нет ли более новой копии.

Манифест

{
  "family": "Thykes Symbols",
  "version": "0.3.0",
  "sourceHash": "…",
  "axes": { "wght": [100, 400, 900], "SCAL": [1, 2, 3] },
  "symbols": [
    {
      "name": "check-circle-fill",
      "codepoint": "U+F0023",
      "keywords": ["check", "done", "success", "complete",
                   "confirmed", "circle", "fill", "solid"],
      "layers": [
        { "name": "shape", "hierarchy": "tertiary",
          "motionGroup": 1, "codepoint": "U+F0024" },
        { "name": "mark", "hierarchy": "primary",
          "motionGroup": 0, "knockout": true, "codepoint": "U+F0025" }
      ]
    }
  ],
  "outputs": {
    "ThykesSymbols.ttf": "<sha-256, hex>",
    "ThykesSymbols.woff2": "<sha-256, hex>"
  }
}

Поле	Значение
`family`	Имя семейства шрифта, `Thykes Symbols`
`version`	Версия набора по семантическому версионированию (см. Версии)
`sourceHash`	Хеш исходников, из которых собраны файлы. Меняется при каждой пересборке с изменёнными исходниками; его можно не читать
`axes`	Каждая ось шрифта в виде `[минимум, по умолчанию, максимум]`. `wght` — насыщенность, от 100 до 900; `SCAL` — масштаб, от 1 до 3
`symbols`	Все символы по алфавиту
`symbols[].name`	Имя символа, например `trash`. Это же имя у файла его контуров
`symbols[].codepoint`	Символ, который рисует всю фигуру одним цветом
`symbols[].keywords`	Слова для поиска символа
`symbols[].layers`	Части символа, снизу вверх
`layers[].hierarchy`	Насколько слой заметен: `primary`, `secondary` или `tertiary`
`layers[].motionGroup`	Число; слои с одинаковым числом двигаются вместе, когда символ анимируется по частям
`layers[].codepoint`	Символ, который рисует только этот слой. Есть только у символов из нескольких слоёв
`layers[].knockout`	`true`, если в одноцветном символе слой вырезан дырой (галочка в `check-circle-fill`). Как отдельный слой он сплошной и лежит сверху
`outputs`	Хеш SHA-256 каждого файла шрифта в шестнадцатеричном виде

В следующих версиях у слоя могут появиться другие пометки; незнакомые поля пропускайте.

Кодовые точки

Каждая кодовая точка, и в манифесте, и в файлах контуров, записана как U+ и её шестнадцатеричное значение заглавными буквами: "U+F0023". Они лежат в области Supplementary Private Use Area-A, начиная с U+F0000. Кодовая точка никогда не меняется и не используется повторно.

const char = String.fromCodePoint(parseInt(symbol.codepoint.slice(2), 16));

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

Насыщенность и масштаб

У шрифта две оси. wght — насыщенность, она следует CSS-свойству font-weight; девять именованных начертаний:

Начертание	`wght`
Ultralight	100
Thin	200
Light	300
Regular	400
Medium	500
Semibold	600
Bold	700
Heavy	800
Black	900

SCAL — масштаб: 1, 2 и 3 — это масштабы S, M и L, тот же символ в 0,8, 1 и 1,28 размера M. Задаётся через font-variation-settings.

@font-face {
  font-family: 'Thykes Symbols';
  src: url(https://thykes.com/v0/symbols/ThykesSymbols.woff2) format('woff2');
  font-weight: 100 900;
  font-display: block;
}
.symbol { font-family: 'Thykes Symbols'; font-synthesis: none; line-height: 1; }
.symbol-small { font-variation-settings: 'SCAL' 1; }
.symbol-large { font-variation-settings: 'SCAL' 3; }

Для скринридера символ ничего не значит: скройте его через aria-hidden="true" и дайте контролу собственную подпись. Шрифт проверен в Chromium и WebKit; Firefox пока не проверен.

Контуры символа

Каждый figma/<name>.json содержит один символ во всех 27 сочетаниях насыщенности и масштаба.

Поле	Значение
`name`, `codepoint`, `keywords`	Как в манифесте
`density`	Класс штриха символа: `open`, `standard` или `dense`. У более плотных символов штрих чуть тоньше
`layers`	Слои снизу вверх: `name`, `hierarchy`, `motionGroup` и, где нужно, `knockout`. `covers` перечисляет более ранние слои, которые этот слой перекрывает; рисуйте его после них
`metrics`	Рамка рисунка: `em` 100 (px), `baselineY` 85, `capLineY` 15 и `unitsPerPx` 10 (единиц шрифта на px)
`strokeRegularM`	Толщина штриха в Regular M, в px при em 100 px
`skeletonRegularM`	Для каждого слоя — осевые линии в Regular M, пути, вдоль которых проведены штрихи. У слоя их может не быть (пустой список)
`instances`	По записи на каждое сочетание насыщенности и масштаба, ключ `"Weight/Scale"`, от `"Ultralight/S"` до `"Black/L"`
`instances[].advance`	Ширина рамки символа в px вместе с боковыми полями
`instances[].layers`	Контур каждого слоя, ключ — имя слоя
`instances[].mono`	Одноцветный контур с вырезанным слоем `knockout`. Есть только у символов с таким слоем

Каждый контур — это данные пути SVG (M, L, C и Z, абсолютные) в px в рамке высотой 100 px и шириной advance, ось y направлена вниз, один знак после запятой. Заливайте по правилу nonzero.

{
  "name": "trash",
  "codepoint": "U+F0089",
  "density": "dense",
  "metrics": { "em": 100, "baselineY": 85, "capLineY": 15, "unitsPerPx": 10 },
  "strokeRegularM": 5.9,
  "instances": {
    "Regular/M": {
      "advance": 93.9,
      "layers": { "trash": "M14.9 32.5C13.3 32.5 …Z" }
    }
  }
}

Версии

version следует семантическому версионированию: новый символ повышает минорный номер (с 0.3.0 до 0.4.0), перерисованный — номер патча (с 0.3.0 до 0.3.1).
Внутри /v0/ каждое обновление совместимо и заменяет файлы на месте.
Изменение, которое сломало бы читателя, выходит в новой папке, /v1/symbols/, а /v0/symbols/ продолжает отдаваться. Это удалённый или переименованный символ, файл или поле и другая запись кодовых точек.
Сначала читайте manifest.json. Шрифт актуален, если его SHA-256 совпадает с outputs; чтобы загрузить новый шрифт в обход кеша, добавьте хеш к его адресу, например ThykesSymbols.woff2?v=<hash>.