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

[@Montmorency]

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

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

[@Montmorency]

Поясню, просто формировать картинку. CSS не при чём.

[@AndrewMayorov]

Можно любую библиотеку. Лишь бы могла на сервере все буквы в битмап выписать. Кстати, можно это делать даже на этапе компиляции. Чтобы вообще рантайм не напрягать.

[@TecHMeaT]

<span class="pp">П</span><span class="ii">Ы</span><span class="sch">Щ</span>

Думаю — за такой заголовок сеошник голову оторвет :)
Если только с помощью JS каждую букву заворачивать в спан, читать содержимое каждого спана и давать этому спану стиль в соответствии с прочитанным. Тяжко, однако…

[@AndrewMayorov]

Во-первых, конечно, яваскриптом это делать. После загрузки. Так что с точки зрения SEO ничего не пострадает.

Во-вторых, я думал скорее так:

<span class="original">hello!</span><span class="h"/><span class="e" /> ...

[@DmitryBaranovskiy]

Если уж с Javascript, то почему бы не сделать это с помощью Cufón?

[@AndrewMayorov]

Подозреваю, что решение со спрайтами должно работать быстрее, чем рисование в канвас скриптом. Но вообще, это у нас теоретические изыскания. Оценка выгоды — это совсем другая история. :)

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

[@AndrewMayorov]

Еще подумал — Ваше решение лучше. Когда каждая буква в отдельном спане, не нужно заморачиваться с позиционированием ориджинала. И копировать можно будет любой кусок строки, причем позиции букв будут похожи на картинку.

[@easyman]

Надо еще как-то извернуться, чтобы текст копировать можно было.
+
Кто нибудь тестил такое кол-во спрайтов? Не тормозит?

[@AndrewMayorov]

Текст можно из ориджинала копировать. Если его оверлейнуть сверху с почти полной прозрачностью.

[@TecHMeaT]

Српацты тормозить не будут, они бывают просто огромные, тормозить будет JS на слабых машинах.

[@Xenkok]

Идея конечно неплохая, но стоит ли оно того? надо подумать…

[@TecHMeaT]

Я думаю, что не стоит. SIFr лучше справится.

[@jetman]

Кроме упомянутого выше SIFr, еще Cufón вам в помощь: habrahabr.ru/blogs/webdev/52755/

[@Heath]

Для буквиц возможно и правда неплохо прокатит, если добавить оформление в p:first-letter… Там и кернингом заморачиваться не нужно. Но больно уж узкое решение получается. :)

[@zxmd]

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

[@zhukov]

С кернингом не получится. В одном только начертании может быть до 1000 кернинговых пар, если не ошибаюсь.

[@Silverstorm]

мсъе знает ток в извращениях

[@andrew_tch]

реализуйте, пожалуйста, мне как-то прислось ипользовать и куфон, и сифр, и то и другие на больших объемах текста содит с ума…
есть еще вариант, генерить css с инлайн изображениями и юзать его. но, как вы решить проблему с размерами и начертаниями шрифтов?

[@AndrewMayorov]

Ну, этот метод тоже вряд ли будет хорошо работать с большими объемами текста. Это, все же, для заголовков и другого такого же.

[@andrew_tch]

у меня благодаря ляпу артдиректора был сайт где-то с 60 заголовками на куфоне. со всеми цифрами и знаками препинания, балтийскими и русскими символами. надо ли говорить как
это висло?

[@inshower]

Упоротый рэпер не может 4 часа записать песню.
Звукач бьётся челом об пульт, потом вздыхает и говорит продюссеру:
— Ладно, бля… Чего уж тут… Пусть алфавит хотя бы прочитает, завтра к утру нарежу.

[@Altzgamer]

Креативное решение.
От текста избавляться можно text-indent:-9999px;, наверное.

кернинг можно загнать и в фоновую картинку (файл правда большой получится :))) ), или описать в js — но это та ещё головная боль.

Тут проблема с поисковой оптимизацией вырисовывается. Даже если исходный заголовок будет отображён, ещё символы в отдельных спанах заставят попотеть роботов, из-за чего, мне кажется, качество текста с точки зрения поисковика пострадает.

Ещё одна вещь — цвет и размер. Под каждый дизайн придётся менять всё фоновое изображение. Учитывая любовь некоторых дизайнеров каждую неделю подправлять на пару единиц цвет для достижения «полной визуальной гармонии», то такая методика может выйти полным кошмаром.

А в целом, рад был бы взглянуть на пример.

[@AzriMan]

а если фон сделать прозрачным?

[@nobr]

Фон — имеется в виду спрайт.

[@sunnybear]

с отключенным JS страница выглядит просто отлично :)

[@n0mini]

А как же зум? а отключенные картинки? Эм, это решение не верно. К тому же подгрузку сторонних шрифтов каким-либо изуверским способом поддерживаю6т ie, ff3.5, opera10, safari3+ (в ие как всегда заморочки, нужно генерить шрифт weft'ом) В стороне только хром (что довольно странно), но его процент мал и, надеюсь, он подтянется за сафариком ^_^

Лучше использовать обычный @font-face, скоро его использование станет более менее кроссбраузерным.

ЗЫ: видел, что выходили из положения с помощью JS'a и flash, но решение так себе…
ЗЗЫ: к тому же метод мусорит в html, можно, конечно, скриптами текстики парсить -_-

В общем мысль хороша на уровне мысли, в жизни неприменима.

[@deniamnet]

это все, конечно, мило )) но специально для этого были придуманы flash-аналоги
кроме того, на страницах с большим кол-вом таких заголовков будет очень «весело»
например, блог, где нужно так оформить заголовки постов
считаем: в среднем по 20 символов в строке * 20 заголовков
итого как минимум 400 span-элементов
кроме того, не забываем о том, что если захочется сделать этот заголовок линком (это получится сделать), то hover к нему не получится сделать нормально

[@HIGOR]

делал PHP скрипт который из нарисованных дизайнером букв составляет слова. Из которых собирается заголовок (оригинальный заголовок скрыт). На каждое слово PHP делает картинку из подготовленных букв. При выводе заголовка проверяется создана ли уже картинка. Если нет то делается если да то выводим готовую. Собственно пример здесь. Пермское агентство недвижимости По этому пути пошли из-за отражений, которые требовал фирменный стиль.

[@xgetc25]

очень плохая идея,
на текущий момент есть @font-face (Firefox 3.5, Google Chrome 2, Opera 10 и Safari 3.1 стало возможным использовать в этих браузерах CSS-правило @font-face) для IE любимого делаем eot формат и все тоже ок.

ну вконец лучше использовать SIFR или JS заменялки.

[@nuxdie]

Люди, что вы все велосипеды-то изобретаете?

Автор топика, посмотрите вот эту реализацию: fontjazz.com/
Внутри js + gif. Почти как Вы хотели…

А для всех, кто ждет не дождется кроссбраузерного @font-face напоминаю, что тут есть серьезные подводные камни. Например с лицензированием и пиратством. И пока не очень ясно, как с ними бороться.

[@ferrari]

— ну так давай модет все arial + verdana бомбить?
если заказчик хочет шрифт — пусть покупает — обычно это от $14 до $100-150, или же ответственность за его использование будет на нём как владельце сайта. Во вторых — мир не без добрых людей и будет/уже есть масса бесплатных шрифтов, бери пользуйся и предлагай людям в качестве бесплатной альтернативы.

[@AndrewMayorov]

Отлично! Спасибо за ссылку. Не могло быть так, чтобы такая простая идея не была реализована. У них только копирования текста не хватает.

[@ferrari]

и тут заказчик говорит, хочу заголовки слева на 2px крупнее, а те что справа — на 1px меньше, и выключите заголовкам жирность — хочу посмотреть — может так будет лучше?

[@AndrewMayorov]

Если этот шрифт генерируется автоматом, то сделать любое изменение несложно.

[@ferrari]

Но ведь три минуты до того как написать этот комментарий вы ведь не знали о наличии генератора :)

Я не смотрел на реализацию того что делает генератор, но еще час назад исходя из вашего примера здесь: habrahabr.ru/blogs/css/68411/#comment_1941018
подумал, о том, как будут переноситься символы, ведь свободно может упасть любая из букв слова, нужно обрамлять. Проблемное выставление line-height (margin-padding), не менее ужасно обстоит дело со ссылками и эффектом hover — нужен второй, третий файл картинка для italic, another color или font-weight. Вектор здесь однозначно выиграет.
Поскольку метод уже существует(генератор есть и вполне рабочий), но не составляет никакой конкуренции typeface, sifr и пр. — то решение считайте решение мертвым.

[@AndrewMayorov]

Немного пооправдываюсь:
1. Я сразу подразумевал, что шрифтовую картинку надо генерить автоматом. См. исходный пост.
2. И я согласился, что разбиение на отдельные спаны лучше — в следующем комментарии (http://habrahabr.ru/blogs/css/68411/#comment_1941430).

Да, метод на сегодняшний день скорее курьезный, чем актуальный. Интересно то, что он прост и может работать в старых браузерах. Фактически, его можно было пустить в ход очень давно. Еще до sIFR и канвасов. Но, вроде как, не пускали?

[@vitalikk]

Копирование доступным можно сделать, если, например, в title или alt писать ту же букву.