В CSS 2.1 появилась одна интересная фича, о которой не все знают — это возможность задавать на веб-странице шрифты и цвета, которые используются в текущей системной теме операционной системы.
Это может быть полезно в ситуациях, когда вы хотите приблизить интерфейс вашей страницы к пользовательскому интерфейсу операционной системы. Например, вы хотите написать Adobe AIR приложение, или сделать справочный интерфейс, наподобие нативной chm-справки (вот как здесь: manual.pohape.ru/).
Задача
Итак, вам приходит макет, а в нём (о ужаÑ!) блок картинок дизайнером Ñтарательно выровнен по обе Ñтороны. Примерно так:
Ðу в верÑтаем мы только резину!
ЕÑÑ‚ÑŒ два варианта:
СверÑтать без выравниваниÑ, а дизайнеру Ñказать что по обе Ñтороны выровнÑÑ‚ÑŒ нельзÑ, либо
Возникла мысль: а нельзя ли использовать CSS-спрайты для того, чтобы выводить заголовки необычными шрифтами?
Кажется, что сделать это не так и сложно.
- Нужно подготовить CSS-спрайт — вывести все буквы в картинку и сделать CSS, в котором для каждой буквы есть свой класс, позиционирующий фон на необходимое место в картинке.
- Помечаем строку, которую необходимо преобразовать, специальным классом.
- В момент загрузки выбираем все помеченные строки и для каждой их буквы создаем span с классом, соответствующим букве из спрайта.
- Оригинальный текст скрываем. Возможно, прозрачностью.
Наконец, можно сделать серверный код, который бы из шрифта (TrueType, например), автоматом бы делал спрайтовую заготовку.
При таком методе точно будет проблема с кернингом. Так что хорошо он будет работать не для всех шрифтов. Но, наверное, кернинговые пары можно было бы задать марджинами.
Кто-нибудь видел такое решение?