Последнюю неделю я потратил на перевод этого блога со старой верстки на “flexbox”. Количество CSS-стилей уменьшилось, размер html-контента уменьшился тоже, но захотелось большего - уменьшить размер web-шрифта с иконками. Я использовал FontAwesome-шрифт как пример и создал новый кастомный шрифт, содержащий только нужные мне иконки - размер получился меньше 6kb! Но во время тестирования проявился странный баг - одна иконка отрисовывалась неправильно в Firefox (58.0.1).
Сначала я подумал, что это проблема кеширования, затем, что Firefox не поддерживает полностью “woff”-шрифты. Но кеш был сброшен, другие иконки из того же шрифта отрисовывались корректно, а баг все еще был на месте. И тогда я начал искать - чем же отличаются шрифты и почему мой новый шрифт не работает как задумано.
Результаты оказались странными. Если глиф внутри шрифта имеет больше чем один CodePoint (индекс монтирования, каждый глиф может быть смонтирован сразу в несколько точек, т.е разные “буквы” могут рисоваться одним глифом) - Firefox не желает его рендерить корректно, причем остальные актуальные браузеры рисовали иконки корректно. В моем случае это был .null-глиф с CodePoint=$00 - эта точка монтирования назначилась первой иконке в моем шрифте. После того, как я добавил пустой глиф для .null-иконки и проверил, что остальные иконки имеют только одну точку монтирования - все иконки стали работать одинаково корректно во всех браузерах.
