Шрифты svg – SVG шрифты

Содержание

css — Как преобразовать файлы .svg в шрифт?

Я нашел два важных ответа здесь: Переполнение стека:

К сожалению, ни один из них не является действительно кодированием, на что я действительно надеялся (утилита командной строки для сценария преобразования или, возможно, API, с помощью которого кто-то мог написать такую вещь).

Тем не менее, я получил то, что искал, объединив эти два ответа.

Очистка SVG

_{^{(Этот шаг может быть необязательным.)}} Откройте свой SVG в бесплатной программе InkScape. Скопируйте существующий SVG и создайте новый проект из шаблона FontForge Glyph. Вставьте в этот шаблон стандартизацию внешнего вида, размера и позиции и сохраните как PLAIN SVG, один файл на символ ( «глиф» ).

Преобразование SVG в шрифт

Затем либо используйте бесплатную программу FontForge напрямую (как указано в первом ответе, создание значков с векторным программным обеспечением), либо использовать бесплатную онлайн-службу IcoMoon (как указано во втором ответе, инструменты для преобразования svg в ttf). Я сделал последнее.

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

IcoMoon — довольно простой инструмент. Нажмите кнопку фиолетового Импорт значков в верхней части страницы, чтобы импортировать каждый из ваших настраиваемых глифов SVG. Затем нажмите «Получить информацию» в настройках, чтобы вы могли назвать набор и дать ему некоторые метаданные. Используйте инструмент «Изменить» (значок карандаша) и нажмите на каждый глиф, чтобы получить размер и расстояние вправо.

Когда вы закончите, выберите все глифы, которые вы хотите в шрифте, а затем нажмите кнопку «Создать шрифт» внизу страницы. На полученном экране вы можете сопоставить каждый символ с символом юникода. С правой стороны вы можете ввести или вставить символ или с левой стороны, вы можете ввести его шестнадцатеричный код. Программа, например Карта символов GNOME (для Linux) или Карта символов Windows или Палитра символов Mac OS может помочь вам найти подходящие коды для ваших глифов.

Теперь нажмите кнопку «Настройки» в верхней части экрана (или шестерню внизу справа) и завершите имя и метаданные вашего нового шрифта и нажмите «Загрузить» в правом нижнем углу. Вы получите файл Fontname.zip, содержащий кучу вариантов использования, а также сами файлы шрифтов.

Итерация

Я обнаружил, что размер и интервал действительно очень трудно (я делал буквы). Я продолжал итерацию на IcoMoon, установку шрифта и сравнение моих букв с буквами аналогичного шрифта (с использованием текстового процессора). Калибровка была легко понятна, но расстояние было не так просто (и я даже не возился с лигатурами или кернинг!). Не забывайте, что некоторые системы требуют очистки кеша шрифтов после установки нового шрифта (в Linux, fc-cache из Fontconfig)

Подтвердить шрифт

Вы также можете проверить свой шрифт. Font Squirrel — это онлайн-сервис, который позволяет вам делать это, предлагая исправления, а также советы по использованию. Я думаю, что IcoMoon уже делает это, поэтому, возможно, это только для творений FontForge.

qaru.site

css — SVG как альтернатива шрифта значка

Не имеет смысла говорить о «поддержке старых браузеров» без:

зная, на что будет работать большинство ваших пользователей (что, конечно, будет несколько браузеров) и
какая поддержка функции вы хотите использовать для тех браузеров, для которых мы можем использовать удобную http://caniuse.com

С учетом сказанного это не будет ответом так, как объяснение того, как все те моменты, которые вы представляете «против» шрифтов, необоснованны. Ответы велики, но в этом случае нам нужно установить отчет прямо, чтобы вы могли принимать реальные решения на основе фактов, а не (либо «никогда», либо «больше не допустимы» ) предубеждения. Я потратил слишком много лет своей жизни, работая со шрифтами с технической точки зрения, чтобы вы могли поддерживать эти утверждения =)

«Значки шрифтов размыты независимо от того, насколько идеально его кривые выровнены по сетке пикселей. Не говоря уже о ужасной рендеринге Windows».

Это простой старый неправда. В качестве векторной графики, если они плохо отображаются, SVG также будет отображаться плохо в одном размере, хотя SVG, как правило, ухудшается: шрифты фактически позволяют оптимизировать микроконтур для работы с небольшими размерами точек (.otf лучше в этом случае. ttf, но создатель шрифтов должен был потратить время, чтобы вставить их. Практически все профессиональные шрифты приходят с этой работой), а SVG этого не делает, потому что для этого нет инструкций на языке векторной графики. Таким образом, шрифты визуализируются либо наравне с (если у них нет инструкций по оптимизации), либо лучше, чем (если они это делают) SVG.

Например, Font-Awesome поставляется с оптимизацией контуров, которая позволяет отображать пиксель до полного размера шрифта 14px, который уже меньше, чем браузеры используют в качестве размера по умолчанию для текста на странице (практически все браузеры согласны использовать по умолчанию 16px serif). Если вы установили свой набор значков и преобразовали его в SVG, тогда попытались использовать уменьшенные размеры, чтобы соответствовать размеру 14px, они выглядели бы абсолютно размытым беспорядком.

Или вы можете использовать уже установленный набор значков, например Symbol Set, который явно предназначен для выравнивания сетки, что означает, что даже при размерах ниже, чем предполагалось, он по-прежнему выглядит замечательно.

SVG проигрывает здесь.

Что касается рендеринга Windows, это может выглядеть плохо, но это не ошибка Windows. Оба Uniscribe и DirectWrite действительно хороши в рендеринг шрифтов. Как, действительно, хорошо (что не может быть сюрпризом, поскольку Desktop Publishing традиционно является основным бизнесом Microsoft с тех пор, как его начало, хотя и переносится). Браузеры, которые подключаются к ним, очень хорошо отображают шрифты: IE даже поддерживает веб-шрифты с IE4… Это 1997 год. Что до того, как HTML4 был даже чем-то, мы все еще были на HTML3.2 в то время.

Проблема заключается не столько в «Windows», сколько в «более старом браузере, который не является IE, в Windows». Браузеры не очень интересовались веб-шрифтами в течение очень долгого времени. Это только последние несколько лет, когда основные усилия внезапно пошли на то, чтобы убедиться, что они приходят с хорошими механизмами формирования шрифтов (например, Harfbuzz, что сейчас используемые Firefox и Chrome), и вы не получите хороших результатов для шрифтов, если вы не используете современную версию «не-IE» на компьютере под управлением Windows.

И наконец, проблема, определенная для «font vs SVG» в Windows и IE: хотя IE поддерживает веб-шрифты, так как навсегда, поддержка SVG только приземлилась в IE9, поэтому, если вам нужно поддерживать IE8, вы даже не можете использовать SVG. В случае с этой конкретной целевой аудиторией «шрифты против SVG» даже не вопрос, вы должны пойти с шрифтом.

«Его трудно добавить новые значки в шрифт, особенно когда шрифт исходного источника источника недоступен и даже потерян».

Нет, это не так, вы все еще используете HTML с CSS, поэтому делайте то, что мы всегда делаем, когда нам нужны «буквы не в этом шрифте»: используйте font-fallback: font-family: iconfont1, iconfont2, iconetc.

«Для поддержки кросс-браузера требуется куча разных версий шрифтов (woff, eot, ttf).

Не через несколько лет. В наши дни нам не нужны несколько источников: caniuse показывает нам, что все поддерживает WOFF и сделал это для нескольких версий.

Даже IE, хотя, если вам нужно поддерживать IE8, вам также придется найти .eot (который буквально является только файлом ttf с дополнительным битом метаданных, поэтому IE примет его… просто как WOFF!), а затем жить с тем фактом, что если для этого требуется преобразование из otf в eot, вы получите в конечном итоге дерьмовый шрифт, потому что это конверсия с потерями (например, преобразование .png в jpg). достойный результат, нормальное программное обеспечение создаст посредственный результат).

И поскольку все поддерживает WOFF, нам (к счастью) больше не нужны смешные всеохватывающие наборы ttf + otf + eot + woff + svg с «пуленепробиваемым» правилом шрифта @, который пытается оптимизировать порядок загрузки поэтому не слишком много файлов бесполезно загружается — просто используйте WOFF. Готово. И в рассоле добавьте .eot в качестве первого источника (с индикатором формата), и все, кроме IE, пропустит его.

Также стоит посмотреть Поддержка SVG-шрифтов: практически ничего не поддерживает, а те, кто это делает, в настоящее время устарели. Шрифты SVG как вещь были прекращены, потому что результаты использования шрифтов SVG оказались невероятно намного хуже, чем использование реальных шрифтов, подчеркивая объяснение в пункте 1.

«В конце шрифты не предназначены для графики вообще (особенно не монохромный), кажется, что это неправильный способ использования пустого пустого и не-семантический <span></span> для этой цели.

Оба эти утверждения неверны.

Шрифты предназначены для кодирования векторной графики, которые должны использоваться в контексте набора текста. Это может означать буквы или значки или эможи; это может быть даже музыкальные ноты или плитки маджонга. И способ, которым они это делают, до недавнего времени был «единственным цветом», который буквально, что монохромный. Единственное место, где монохромный рендеринг для шрифтов может быть проблемой, — это монохромные мониторы, и в этом случае: где, черт возьми, к вашим веб-страницам обращаются, что они могут отображать webfonts, но делают это по технологии «древний-четный-для-CRT» O_O

Что касается семантики: если вам нужен значок, который не имеет значения внутри документа и является чисто конфеткой, то вы

do хотите не-семантический элемент, чтобы читатели текста и т.д. для людей с нарушениями зрения или чтения не получают ваш значок вслух для них, а текстовые индексы для поисковых систем (частные или общедоступные) могут полностью игнорировать их. Ваш значок должен определенно быть не семантическим пустым элементом, который может быть пропущен всем.

С учетом всего сказанного, как насчет растровых изображений?

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

Конечно, только высококачественные шрифты поставляются с этими, но это также вещь, которую вы проверяете: есть ли шрифт значка, который вы ищете, с растровыми изображениями? Если это так, у нас есть победитель. Если нет, то вы можете захотеть использовать шрифт значка, который вы хотите использовать, сгенерировать свои значки в виде растрового файла, а затем вручную очистить растровое изображение, прежде чем использовать его на своем сайте.

Этот процесс по своей сути является ручным, ни один utiltiy не сделает это за вас, и не будет достаточно ошибочным, если вам все еще нужно вручную исправлять ситуацию, но если вы поедете по этому маршруту, и вы создадите свои собственные значки на основе известный шрифт, размер точки, который делает иконки лучше, чем рендеринг шрифтов: вернуть мир и отправить эти растровые изображения обратно создателям шрифтов, чтобы они могли использовать их для создания шрифта таблицы EBLC, EBDT и EBSC , и все остальные получают возможность использовать растровые изображения внутри шрифта, поэтому нам не нужно делать безумный рендеринг CSS-спрайтов.

qaru.site

SVG. Работаем с текстом

Выводим текст

Текст задаётся с помощью тега text. Основные атрибуты — x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер viewBox также должно быть по крайней мере равен размеру атрибута. Атрибут font-sizeзадаёт размер шрифта в пикселях относительно viewBox. Текст при этом адаптируется к размерам страницы. Также доступны и другие атрибуты.

Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
    <text y="50" font-size="32" font-weight="bold" 
    font-family="Avenir, Helvetica, sans-serif">
        Этот кот в SVG
    </text>
</svg>

Этот кот в SVG

Нужно следить за размерами viewBox, чтобы длинный текст уместился в контейнере.

Как и в HTML, лишние пробелы игнорируются.

Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.

Атрибуты

direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
font-size — Размер шрифта. Значение по умолчанию 12 пт.
font-size-adjust — Значение по умолчанию — none
font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
letter-spacing — Интервал между буквами. Возможные значения: normal | число
text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">Подчеркнутый кот средствами SVG</text>
</svg>

Подчеркнутый кот средствами SVG

Частичная стилизация через <tspan>

Если нужно применить стили или атрибуты только для определенной части, то можно использовать элемент <tspan> к разным частям текста в строке.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 20">
  <text x="0" y="15">
  <tspan>Жирный кот</tspan>, 
  <tspan>наклонный кот</tspan> и <tspan>подчеркнутый кот</tspan>.</text>
</svg>

Жирный кот, наклонный кот и подчеркнутый кот.

Цвет

Цвет текста задаётся через свойство fill.


<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 52">
    <text y="50" font-size="40" font-weight="bold" font-family="Avenir, Helvetica, sans-serif" fill="red">Цветной кот</text>
</svg>

Цветной кот

Режим вывода текста

Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.


<svg xmlns="http://www.w3.org/2000/svg">
  <text x="70" y="20">Неко - японский кот</text>
</svg>

Неко — японский кот

Добавление текста в заголовок страницы

Можно сделать красивый заголовок на странице, используя CSS:


header { 
  width: 80%;
  margin: 0 auto;
}
svg text { 
  font-family: sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 90px;
  fill: blue;
}

<header>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 285 80">
        <text x="0" y="66">Hawaii</text>
    </svg>
</header>

Посмотреть демо.

SVG будет автоматически подстраиваться под размеры контейнера.

SVG может использовать любой шрифт, встроенный в страницу или из CSS. Текст доступен для поисковых роботов.

SVG-текст можно сделать ссылкой.


<header>
    <img src="waves.svg" alt="Waves"> 
</header>

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

Обводка текста

Обводка для текста делается похожим образом, как в CSS, только вместо указания цвета для текста нужно использовать свойство fill. Если цвет не указан, то используется чёрный цвет.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<text y="50" fill="#c96" 
    font-size="32px" 
    font-family="Futura Condensed ExtraBold, Arial Black, sans-serif" 
    stroke="yellow" stroke-width="2px">Обведи кота вокруг пальца</text>
</svg>

Обведи кота вокруг пальца

Присвоим атрибуту fill значение none, чтобы оставить только обводку.

Обведи кота вокруг пальца

При желании можно вынести код в стили.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 500 80">
	<defs>
		<style>
		text {  
		  fill: #c96; font-size:32px;
		  font-family: Futura Condensed ExtraBold, Arial Black, sans-serif;
		  stroke: yellow; stroke-width: 2px;
		}
		</style>
	</defs>
	<text y="50">Обведи кота вокруг пальца</text>
</svg>

Градиент

Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient x1="0%" x2="0%" y1="0%" y2="100%">
      <stop stop-color = "#ddd" offset = "0%"/>
      <stop stop-color = "#FF00ee" offset = "100%"/>
    </linearGradient>
  </defs>
  <text x="0" y="40" font-size="42" font-weight="bold" fill="url(#textgradient)" stroke="none">Градиентный кот</text>
</svg>

Градиентный кот

Текст вдоль кривой линии

Текст можно выводить не только строго вдоль вертикальной линии, но и вдоль замысловатой кривой.

Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:


<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <path fill="none" stroke="#000000"
      d="M0.057,0.024c0,0,10.99,51.603,102.248,51.603c91.259,0,136.172,53.992,136.172,53.992"/>
  </defs>
  
  <use xlink:href="#textpath"/>
  <text x="10" y="100" font-size="24">
  <textPath xlink:href="#textpath">
    Кот вдоль кривой
  </textPath>
  </text>
</svg>

Кот вдоль кривой

Пример размещения текста вдоль окружности вынесен в отдельную статью.

Вернуться в раздел SVG

Генерация иконочного шрифта из SVG

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

Наверняка многие из вас думают, что сделать иконочный шрифт — это какой-то rocket science. Ну, в исполнении дизайнеров, так оно и есть :). А теперь мы посмотрим на этот вопрос с точки зрения программистов. Популярность шрифта зависит не только от того, как он нарисован, а еще и от того, насколько им удобно пользоваться. И если найти дизайнера, который сделает векторную иконку, вполне реально, то засунуть это все в шрифт уже проблема. А уж «подкрутить» какой-нибудь глиф спустя пол года, когда дизайнера след простыл — совсем тоскливо. Наверное поэтому иконочные шрифты пока не получили широкого распространения — «очень сложно». И эту ситуацию мы пытаемся изменить.

Во время работы над фонтомасом пришлось столкнуться с тем, что у каждого дизайнера собственное «видение» насчет размера глифов, выравнивания и кодов символов. И для фонтомаса приходилось все шрифты приводить к единому знаменателю. Но требований становилось все больше, и в итоге получился набор скриптов, которые по развесистому конфигу могут делать все что надо, и даже больше. Теперь, имея векторные картинки, собрать свой собственный шрифт не проблема.

Процесс выглядит так:

~~Рисуем сову~~ Добываем SVG-иконки
Берем фонтфорж и утаптываем SVG-иконки в ttf-шрифт
Делаем хинтинг
Конвертируем в остальные форматы
Делаем CSS для бустрапа 🙂
Делаем красивую демо-страничку

Прелесть в том, что все, кроме добывания иконок полностью автоматизируется.

Где взять эту магию?

Пока тут github.com/danielbruce/entypo. Отлаживалось все на шрифте Entypo, так как с его автором оказалось проще всего общаться.

Инструкции по установке и запуску в файле DEVELOPMENT.md. Картинки кидаются в папку `./src/svg`, правится конфиг и запускается `make`. После этого в папке `./font` оказываются собранные фонты, демо-страничка и CSS-файл для twitter bootstrap.

Рассмотрим поподробнее все шаги.

Генерация базового ttf-шрифта из векторных иконок

Тут все делается через fontforge, скриптом fontbuild.by. Все просто — из конфига всасываются глобальные параметры фонта, а потом импортируются SVG-изображения на место нужных глифов.

Файл конфигурации в формате yaml. Фактически JSON, но человекопонятный, и с возможностью расставлять комментарии. Секция `font` содержит глобальные параметры шрифта. Будете делать свой — видно что подкрутить. Названия переменных можно смотреть в fontforge api.

С глифами немного хитрее. Это массив хешей. Для каждого глифа задано указано имя файла (без расширения), код символа и имя для CSS. Можно добавить любую дополнительную информацию. Например, синонимы для поиска, если вы делаете проект вроде фонтомаса и вам понадобится подобное.

На что обратить внимание, когда готовите векторные картинки:

При импорте изображение автоматически масштабируется на ВСЮ высоту глифа. Оптимально сделать для начала отступ по 10% сверху с снизу, иначе символы будут казаться слишком большими рядом с текстом. Это можно подогнать через CSS, но зачем, если можно сделать сразу хорошо?
Иконочные шрифты — НЕ текстовые. Подумайте, возможно лучше будет выровнять символы не по baseline, а по середине строчных букв.
Для идеального результата нужно будет «подвигать» некоторые глифы, визуально оценивая выравнивание.
Иконочным шрифтам НЕ требуется кернинг, наклон и т.п. Поэтому при генерации шрифта пропущена куча параметров. Почти все фонтфорж проставляет автоматически. Впрочем, если хотите — добавляйте что угодно в секцию `font` конфига.

Хинтинг

Это такая хреновина для субпиксельного сглаживания, которая радикально улучшает качество изображения мелких пиктограмм. Хинтованные шрифты практически не уступают по качеству обычным картинкам. А на ретиновских дисплеях все вообще замечательно.

Наверное, лучше всего сходить на сайт программы ttfautohint, посмотреть ролик и почитать про алгоритмы. Если по-простому — хинтовать почти никто не умеет, а кто умеет — говорят, что ttfautohint-а хватает за глаза.

Обратите внимание, что по моей просьбе автор дорабатывал программу, чтобы она поддерживала иконочные шрифты (там нет букв, по которым вытягивается часть метрик для тектов). Эти изменения еще не вошли в релиз 0.8, поэтому используйте именно те исходники, которые идут со скриптами.

Конвертация в другие форматы

Итак, у нас теперь есть собственный зашибенный фонт в формате ttf, и надо его сконвертировать во все остальные, чтобы использовать на вебе. Со всем, кроме EOT, прекрасно справится фонтвордж. Смотрите исходник fontconvert.py. Для детища известных ~~говноделов~~ любителей стандартов есть открытая утилита ttf2eot. Под наши нужды подойдёт.

Делаем CSS

Так как искать коды глифов очень муторно, логично генерировать CSS автоматически. Для этого в конфиге есть дополнительные данные. По ним наш суперскрипт parse_template.py обрабатывает самый обычный mustache-шаблон, добавив немного магии. Тынц.

Остановимся на CSS поподробнее. Изначально была задумка мапить символы по стандарту Unicode 6.1, задавать все эскейп-последовательностями, а потом понтоваться модностью и современностью. Но жизнь внесла свои коррективы. По браузерам получается так:

Firefox — он прекрасен, понимает в CSS все что надо в любом виде.
Chrome — обламывается на 3-байтных эскейп-последовательностях вида `1Fxxx`, но срабытывает, если символ задавать кодом напрямую. Правда, для этого у CSS приходится указывать кодировку.
Opera — полный капец. Недостатки хрома, плюс какие-то фатальные факапы с 3-байтными кодами. Такое впечатление, что там жестко зашиты разрешенные символы от старого юникода, и новые оно просто не в состоянии понять. Ну и до кучи, @font-face работает только через http.

Поэтому пришлось вместо прекрасного мапинга «по стандарту» перекинуть часть символов в Private Use Area. Правильные коды оставлены в комментариях, на случай если кто-то придумает, как разобраться с оперой.

Теперь про магию парсера темплейтов. В принципе, он читает конфиг «как есть», и передает его в шаблонизитор. Но по пути подкручивает пару вещей:

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

Демо-страница

Тот же принцип, что и для CSS. Исходник на мусташе, использует твитеровский бустрап. Парсер прежний.

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

Чем вы можете помочь

Желательно написать инструкцию, как ставить все необходимое под маком и windows. Не знаю, как там принято работать и как удобнее. Да и под линукс стоит подрихтовать описание.
Надо бы пошаманить с CSS, и попробовать решить опера-проблемы. Душа болит делать шрифты с кривой картой глифов.
В принципе можно попробовать пошаманить с параметрами антиалиасинга, которые поддерживают некоторые браузеры, но по-моему смысла мало. Но если кто-то найдет время покрутить данный шрифт в разных операционках и разных размерах — буду рад.
Если здесь есть люди, которые профессионально занимаются изготовлением шрифтов — проверьте пожалуйста сгенерированные файлы на валидность. В браузерах они показываются, но возможно стоит что-нибудь поменять во внутренних таблицах.

Репозиторий Entypo со скриптами находится здесь: github.com/danielbruce/entypo. Лицензия на сами скрипты — MIT.

В принципе, если будут желающие среди дизайнеров — можно сделать единый репозиторий для открытых иконок, и включить итоговый шрифт в фонтомас. Мало кому по силам сделать набор из 100500 пиктограмм, и потом их поддерживать. С другой стороны, с миру по нитке набирается очень быстро. Например, когда мы начинали делать фонтомас, было доступно всего 2 качественных иконочных шрифта (iconic & websymbols). Через месяц появился Entypo, а потом и FontAwesome. Наверное, с отдельными картинками может получиться так же. Ведь теперь процесс изготовления иконочных веб-шрифтов стал еще ближе к народу.

И напоследок, обратите внимание, что замечательный проект ttfautohint зависит от пожертвований. Буду рад, если вы тоже найдете возможность поддержать автора этой полезной утилиты.

Автор: Vitaly

Записи

Шрифты svg – SVG шрифты | MDN