Gate A1 — руководство пользователя

Мы выпустили шрифт Gate A1. Это гротеск в шести начертаниях со спокойным индустриальным рисунком, который поддерживает все европейские языки, в том числе греческий, и расширенную кириллицу, включая все основные языки народов России.

Но самое интересное, что есть в этом шрифте — это очень много разных стрелок и восемь видов рамок и плашек.

В каждом начертании Gate A1 больше 2800 знаков. Очевидно, что до всех символов не удастся добраться прямо с клавиатуры — поэтому рассказываем, как это сделать.

У большинства стрелок есть фиксированные места в Unicode. Как вызвать нестандартные знаки в десктопных приложениях, зная их юникоды, мы рассказывали в справочной части лонгрида «Тёмная сторона шрифта». В вебе вставить в текст знак можно с помощью кода &#xUUUU; (подставив вместо UUUU нужный юникод).

В Gate A1 несколько комплектов цифр, причём не только стандартный выбор «пропорциональные или моноширинные», но и варианты с альтернативным рисунком.

Возможность добраться до рамок, плашек и кружочков реализована с помощью OpenType — контекстных альтернатив и стилистических сетов. Вот комбинации, которые вызывают все восемь разновидностей рамок.

Рамки:

В InDesign они включаются здесь:

В Figma здесь:

Инструкции для других приложений можно найти в справочной части «Тёмной стороны шрифта».

В вебе включить эти альтернативы можно с помощью CSS. Вот примеры кода:

Подключение шрифта в таблицах стилей

@font-face {
font-family: "GateA1Medium";
src: url("font/Gate-A1_Medium.eot");
src:
url("font/Gate-A1_Medium.eot?#iefix") format("embedded-opentype"),
url("font/Gate-A1_Medium.woff2") format("woff2"),
url("font/Gate-A1_Medium.woff") format("woff");
font-weight: normal;
font-style: normal;
}

body {
font-family: "GateA1Medium";
}

Стили для квадратных рамок

/* Квадраты полные */
.squares { font-feature-settings: "ss11"; }

/* Квадраты открывающие */
.squares_int { font-feature-settings: "ss10"; }

/* Квадраты закрывающие */
.squares_fin { font-feature-settings: "ss12"; }

/* Середины */
.middles { font-feature-settings: "ss04", "ss13"; }

/* Квадраты полные инверсные */
.squares_b { font-feature-settings: "ss05", "ss11"; }

/* Квадраты открывающие инверсные */
.squares_b_int { font-feature-settings: "ss05", "ss10"; }

/* Квадраты закрывающие инверсные */
.squares_b_fin { font-feature-settings: "ss05", "ss12"; }

/* Середины инверсные */
.middles_b { font-feature-settings: "ss05", "ss13"; }

Стили для круглых рамок

/* Круги полные */
.circles { font-feature-settings: "ss04", "ss11"; }

/* Круги открывающие */
.circles_int { font-feature-settings: "ss04", "ss10"; }

/* Круги закрывающие */
.circles_fin { font-feature-settings: "ss04", "ss12"; }

/* Середины */
.middles { font-feature-settings: "ss04", "ss13"; }

/* Круги полные инверсные */
.circles_b { font-feature-settings: "ss06", "ss11"; }

/* Круги открывающие инверсные */
.circles_b_int { font-feature-settings: "ss06", "ss10"; }

/* Круги закрывающие инверсные */
.circles_b_fin { font-feature-settings: "ss06", "ss12"; }

/* Середины инверсные */
.middles_b { font-feature-settings: "ss05", "ss13"; }

Примеры html-кода для надписей
со сплошными рамками

<p><span>Москва &#x21bb; Вы здесь</span></p>

МОСКВА ↻ ВЫ ЗДЕСЬ

<p><span class="squares_int">Р</span><span class="middles">остов-на-Дону&#x2193;111</span><span class="squares_fin">5</span></p>

РОСТОВ-НА-ДОНУ↓1115

<p><span class="circles_int">C</span><span class="middles">амара&#x2192;111</span><span class="circles_fin">7</span></p>

CАМАРА→1117

<p><span class="squares_b_int">У</span><span class="middles_b">фа&#x2192;138</span><span class="squares_b_fin">4</span></p>

УФА→1384

<p><span class="circles_b_int">К</span><span class="middles_b">расноярск&#x2192;416</span><span class="circles_b_fin">9</span></p>

КРАСНОЯРСК→4169

<p><span class="squares">Воронеж&#x2935;554</span></p>

ВОРОНЕЖ↓554

<p><span class="squares_b">Волгоград&#x2198;1009</span></p>

ВОЛГОГРАД↓1009

<p><span class="circles_b">Краснодар&#x2193;1385</span></p>

КРАСНОДАР↓1385

В магазин