Pull to refresh

Годятся ли CSS-спрайты для шрифтов?

Reading time 1 min
Views 1.7K
Возникла мысль: а нельзя ли использовать CSS-спрайты для того, чтобы выводить заголовки необычными шрифтами?

Кажется, что сделать это не так и сложно.
  1. Нужно подготовить CSS-спрайт — вывести все буквы в картинку и сделать CSS, в котором для каждой буквы есть свой класс, позиционирующий фон на нужное место в картинке.
  2. Помечаем строку, которую нужно преобразовать, специальным классом.
  3. В момент загрузки выбираем все помеченные строки и для каждой их буквы создаем span с классом, соответствующим букве из спрайта.
  4. Оригинальный текст скрываем. Возможно, прозрачностью.

Наконец, можно сделать серверный код, который бы из шрифта (TrueType, например), автоматом бы делал спрайтовую заготовку.

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

Кто-нибудь видел такое решение?

Update:
Благодаря хабраюзеру nuxdie нашлась готовая реализация этой идеи: fontjazz.com. Не позволяет только текст из заголовка копировать.

Update 2:
Хабраюзер Magarich предлагает свою реализацию — 5socks.net. Здесь можно и копировать. Жалко, что из-за прозрачности текста выделение тоже совсем не видно.
Tags:
Hubs:
+18
Comments 45
Comments Comments 45

Articles