Как сверстать такой текст?

Question

[FlexibleCurd]

Имеется ввиду текст: "Hype"
Вот так он выглядит при редактировании в фотошопе:
Тут кстати можно скачать шрифт

Comments

[Stalker_darkway]

Да воткни ты его картинкой уже.

Answer 1

[xmoonlight]

Картинку переводим в кривые и вуаля: SVG тут будет куда лучше, чем лестницы пикселей.

Answer 2

[LittleFatNinja]

покалючаешь шрифт и пишешь слово этим шрифтом, в чем проблема?
или картинкой, будет универсальнее

Comments

[Сергей delphinpro]

Ради четырех букв шрифт подключать?

[LittleFatNinja]

Сергей:

или картинкой, будет универсальнее

слепой или как?

[Сергей delphinpro]

LittleFatNinja: я спросил о первом варианте твоего решения.

[Максим]

Сергей: да ради этого подключать шрифт! CSS бля минимфицируй!

[Сергей delphinpro]

Максим: Где связь между шрифтом и минификацией CSS?

[Максим]

Сергей: ну а чего шрифт тогда не подключит?

[Сергей delphinpro]

Максим: Слово "оптимизация" о чем-нибудь говорит?

Хотя, мне в руки попадали сайты, на которых полный fontawesome был подключен ради одного значка рубля. Тот верстальщик, наверное, также думал. О чем тут говорить...

[Максим]

Сергей: вам 50кб сложно загрузить?

[Сергей delphinpro]

Максим: Мне нет. А потенциальному пользователю с планшета через плохой 3G - очень даже. Тем более, следуя вашей логике, такие "50кб сложно загрузить?" в проекте легко могут превратиться в 200-300-... лишних кб.

[Максим]

Сергей: ваше решение?

Answer 3

[Stalker_darkway]

А в чем проблема-то если даже шрифт имеется? Подключаешь шрифт и ... и все. Блин, ну если там у тебя какие-то расстояния непонятные между буквами, то можешь поэкспериментировать с letter-spacing, совсем все плохо, то задай каждой букве класс и стили и управляй как хочешь. Ну или как посоветовали вообще вставь картинкой.

Comments

[Otrivin]

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

[Кирилл Туровников]

Otrivin: кернинг вроде не меняется, может отличаться само написание, толщина/резкость. Тут надо применять transform: skew() rotate();