Шрифт на чистом CSS
Десять лет назад я пытался решить проблему отсутствия у пользователей татарского шрифта (с Юникодом тогда было плохо, да и татарский туда не входил по-моему) через CSS — комбинируя стилем буквы со знаками препинания, чтобы получить татарские «җ», «ө», «ң» и так далее. Т. е. я брал «ж» и запятую, сдвигал их относительно друг друга и получал «җ».
Мощность компьютеров и возможности браузеров тогда были таковы, что такой HTML выводился буквально по слогам — компьютер нагружался сильно.
Сейчас такой проблемы нет, зато мощность компьютеров и браузеров возросли многократно. Я попробовал для интереса создать шрифт на чистом ЦСС. Там где можно пользовался только стилем бордюра, где нельзя — использовал CSS-transformation.
Правда я сделал ошибку — сначала создал все самые простые буквы, а потом уже начал делать сложные. Ближе к концу я начал терять интерес к происходящему и на некоторых буквах уже халтурил — некоторые из них отличаются по размеру.
Слова пишутся внутри тега TEXT, буквы повешены на однобуквенные теги, им соответствующие. Для наглядности, вот код, который напишет HELLO с моим стилем CSS:
<text><h></h><e></e><l></l><l></l><o></o></text>
Цифр я изготовил всего две, они на тегах D1 и D8 (т. е. работают только однёрка и восьмёрка), кроме всего есть два знака препинания — точка (на теге DOT) и запятая (COMMA).
Из-за использования трансформаций, часть букв будет работать только в определённых версиях браузеров: ФФ 3.5+, ИЕ 9+, Опере 10.5, Сафари 3.1. По поводу «Хрома» ничего сказать не могу, когда он начал поддерживать трансформации мне неизвестно.
Обратите внимание, кстати, что в ИЕ можно такой шрифт создать уже с версии 5.5 — там есть фильтр matrix, при помощи которого можно эмулировать всё, что я использовал.
В ужатом состоянии (через оптимизатор CSSO) шрифт занимает всего 3,8КБ.
На демо-странице нету доктайпа, поэтому ИЕ падает в квирксы и ничего не показывает, пока не выставишь ему режим стандартов.
Комментарий для extremefrost.wordpress.com:
Мне посмотреть негде. Я сейчас поставил, подойдёт такой?
Комментарий для Евгения Степанищева:
Ага, теперь ОК.
Можно как figlet’ы использовать, для защиты от ботов :)
Комментарий для mr-simm.livejournal.com:
Их же напротив, проще роботам читать :) Искажений нет.
Помню, 10 лет назад были сайты, где весь текст был сделан картинками. Причём каждая буква в отдельном файле.
Комментарий для sapegin.ru:
Были такие, ага, я тоже помню. Но картинки много занимают и грузятся долго, а тут весь «шрифт» 3,5КБ (если гзипануть, то ещё меньше будет).
Так необязательно тэгам соответствовать буквам.
Комментарий для mr-simm.livejournal.com:
Ну а какая разница? Достаточно взять все стили и один раз карту составить. Кроме того, можно вообще их сунуть в браузер и просто распознать скриншот потом.