Это сайт — моя персональная записная книжка. Интересна мне, по большей части, история, своя жизнь и немного программирование.

Шрифт на чистом CSS

Десять лет назад я пытался решить проблему отсутствия у пользователей татарского шрифта (с Юникодом тогда было плохо, да и татарский туда не входил по-моему) через CSS — комбинируя стилем буквы со знаками препинания, чтобы получить татарские «җ», «ө», «ң» и так далее. Т. е. я брал «ж» и запятую, сдвигал их относительно друг друга и получал «җ».

Мощность компьютеров и возможности браузеров тогда были таковы, что такой HTML выводился буквально по слогам — компьютер нагружался сильно.

Сейчас такой проблемы нет, зато мощность компьютеров и браузеров возросли многократно. Я попробовал для интереса создать шрифт на чистом ЦСС. Там где можно пользовался только стилем бордюра, где нельзя — использовал CSS-transformation.

CSS-шрифт (18.88КиБ)

Правда я сделал ошибку — сначала создал все самые простые буквы, а потом уже начал делать сложные. Ближе к концу я начал терять интерес к происходящему и на некоторых буквах уже халтурил — некоторые из них отличаются по размеру.

Слова пишутся внутри тега 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КБ.

9 комментариев
Алексей Евдокимов (extremefrost.wordpress.com) 2012

На демо-странице нету доктайпа, поэтому ИЕ падает в квирксы и ничего не показывает, пока не выставишь ему режим стандартов.

Евгений Степанищев (bolknote.ru) 2012

Комментарий для extremefrost.wordpress.com:

Мне посмотреть негде. Я сейчас поставил, подойдёт такой?

Алексей Евдокимов (extremefrost.wordpress.com) 2012

Комментарий для Евгения Степанищева:

Ага, теперь ОК.

SiMM (mr-simm.livejournal.com) 2012

Можно как figlet’ы использовать, для защиты от ботов :)

Евгений Степанищев (bolknote.ru) 2012

Комментарий для mr-simm.livejournal.com:

Их же напротив, проще роботам читать :) Искажений нет.

(sapegin.ru) 2012

Помню, 10 лет назад были сайты, где весь текст был сделан картинками. Причём каждая буква в отдельном файле.

Евгений Степанищев (bolknote.ru) 2012

Комментарий для sapegin.ru:

Были такие, ага, я тоже помню. Но картинки много занимают и грузятся долго, а тут весь «шрифт» 3,5КБ (если гзипануть, то ещё меньше будет).

SiMM (mr-simm.livejournal.com) 2012

Их же напротив, проще роботам читать :) Искажений нет.

Так необязательно тэгам соответствовать буквам.

Евгений Степанищев (bolknote.ru) 2012

Комментарий для mr-simm.livejournal.com:

Ну а какая разница? Достаточно взять все стили и один раз карту составить. Кроме того, можно вообще их сунуть в браузер и просто распознать скриншот потом.