Создание значка кросс-браузера webfont

Я делаю свой собственный webfont в качестве отправной точки из веб-дизайн-депо и intridea.

Я знаю, что разные механизмы визуализируют шрифты по-разному, но проблема, с которой я сталкиваюсь, заключается в том, что firefox отображает шрифт выше, чем хром - при размере, который я показываю шрифтом, это очень заметно (3 или 4 пикселя - что на кнопке означает, что они полностью несовместимы).

Я также ссылался на документацию по Gitub octicon - при проверке того, как octicons сравнивают браузер, они выглядят великолепно! Насколько я вижу, заметной разницы нет. Как они достигли этого?

Я использую inkscape и попробовал пару шаблонов старшего стартера svg. Программа установки Set width: 1024 и попробовала значки разных размеров без какого-либо другого результата. то есть 512pt квадрат и выровнены как раз под базовой линией.

Мой вопрос - какие правила мне нужно внедрить при создании webfont, чтобы получить наименьшую разницу между рендерингом шрифта браузера?

Ответ 1

Это сложный вопрос, который включает нечто, называемое вертикальными метриками. Шрифт имеет три набора из них. первый набор, найденный в таблице "hhea", обычно специфичен для Mac. Остальные два набора, найденные в таблице "OS/2", относятся к Windows (и Linux). Идея состоит в том, чтобы выровнять эти значения. У нашего Генератора есть функция, названная как-то странно "Fix Vertical Metrics", которая наилучшим образом угадывает их. Обратите внимание, что Github использовал Generator для завершения своих значков.

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

Некоторое чтение:

Ответ 2

Там webapp, icomoon: http://icomoon.io/app/

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

Они предлагают множество значков, если вы не хотите создавать все.

Ответ 3

У меня была такая же проблема, и я решил ее вручную, установив метрики для всех трех типов.

Вы можете увидеть мое рабочее решение со скриншотами настроек здесь: /questions/288668/how-can-i-create-a-font-where-the-glyphs-cover-100-of-the-font-size-height/1432087#1432087

Ответ 4

Я использовал Icomoon App, чтобы создать шрифт значка Emoji, а также для создания пользовательских шрифтов значков на основе каждого проекта.

Приложение Icomoon позволяет выполнять следующие действия:

Получить один или несколько значков из нескольких популярных шрифтов значков
Загрузите другие шрифты, которые могут быть значками шрифтов, а также обычные шрифты
Загрузка SVG файлов для использования в качестве значков
Объединить любое количество значков из любого количества доступных шрифтов
Установите шестнадцатеричное значение UNICODE для любых символов, которые вам нужны.
Экспорт и/или сохранение созданного вами шрифта

Подробнее см. Создать веб-интерфейс с дополнительными символами многоязычной плоскости Unicode.