web-fonts
Недавно я рассказывал, как просидел над модификацией одного интересного инструмента до утра. Получилось так, что, занявшись, однажды, созданием собственных шрифтов, я неизменно связался и с вопросами отображения их разными браузерами.
Попутно выяснилось, что браузеры не поддерживают парный кернинг, т.е. выравнивание различных пар символов относительно друг друга. Таким образом, добиться комфортного отображения не удавалось...
Однако, поиски привели меня к интересному плагину к jQuery - lettering.js. Делает он следующее - указанные DOM элементы он разбивает на отдельные символы (слова/строки), каждый из которых оборачивает в отдельный span с id вида 'char1'. В итоге это позволяет манипулировать каждым отдельным символом (словом/строкой) посредством css, причём, не прибегая к ручной разбивке в разметке. Ну клёво!
Далее обнаружился и тот самый тул, с которого я начал повествование - Kern.js. Чувак написал удобный инструмент, позволяющий для любого сайта (с предустановленными jQuery и lettering) производить указанную юстировку межбуквенных отступов визуально - посредством клавиш или мыши. На выходе он выдаёт css, готовый для вставки на сайт.
Я заинтересовался, выписал код и просидел с ним до утра. Результатом стал довольно объёмный рефакторинг и несколько новых фич: выравнивание отдельных символов по вертикали (с относительным позиционированием), изменение размера и поворот. Всё средствами css3. Поиграться и забрать код можно у меня в репозитории на github.
P.S. Попутно выяснил, что, оказывается, IE поддерживает web-fonts чуть ли не с 4 версии, тогда как я был уверен, что такой поддержки нет. Неудобство только в том, что шрифты нужно конвертить из TrueType в EOT - Embedded OpenType. Проблема решилась с помощью он-лайн конвертора TTF → EOT. Теперь шрифты на Безумном показываются и в IE.