Cufón – используйте шрифты, какие душа пожелает

[news29]

Вопрос. А какого размера получается файл содержащий шрифт, который в нашем случае Rockwell_400-Rockwell_700.font.js?

[seraph]

Всё зависит напрямую от сложности шрифта (от количества элементов). Можно получить файл на 20 Кб, можно на 300. В среднем для гротесков и антикв 40-60 кб. По моему опыту.

[Zada]

31.2 кб. Генерится он уже сжатым.
Изначально файлы шрифтов весили 132 кб.
При генерировании были использованы настройки по умолчанию (за одним исключением, которое я уже не помню).

[seraph]

Вообще на хабре с годик назад это было, но за проделанный объём работы всё равно плюс.

От себя добавлю, что остановился именно на Куфоне, ибо сам он и его шрифты весят меньше, чем у typeface и шрифт генерится правильный, а не пойми что, как у sIFR (и без плясок с флешем). Есть правда пока мелочи типа невозможности визуально выделить текст, но это обещали исправить вроде.

В общем лучшее после font-face решение. ИМХО.

[Zada]

На счет выделения текста: это врядли пофиксают, так как там заменяется на <canvas>, что по сути есть картинка. Так что это больше к создателям браузера, а не куфона.

[seraph]

Угу, всё упирается в IE, насколько я помню. Но когда-то обещали, что пофиксят. Ждём-с )

[labria]

Фиг! Все упирается в оперу. Они писали что знают как сделать выделение везде, кроме оперы.

[seraph]

Да, вы действительно правы. Привычка хаять IE меня в этот раз подвела )

[nicothin]

не боаузера, а IE.

[Zada]

Имелось ввиду, что даже если есть поддержка canvas, выделять текст на нем невозможно. Это как картинка.

[dfilatov]

Невозможность визуального выделения для текста — это, по-моему, не мелочь.

[seraph]

Генерация уродливого шрифта sIFRом не мелочь, на этом фоне невозможность выделить штекст — мелочь. Так как применять особые шрифты разумно для рекламных блоков, менюшек и прочего, но никак не для основного текста, то можно с большой вероятностью сказать, что выделять этот текст мышкой будут очень немногие. Хотя факт косяка, это, конечно, не отменяет.

[ulitin]

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

[lebowski]

Выделить телефон или электронную почту — это добрая половина юскейсов источника информации «сайт в интернете».

[labria]

Да. Я лично от этого сифона отказался сразу, как увидел что там не работает выделение.

[4pcbr]

Кстати, в примере стало хуже чем было: ) шутка.

Жаль, что сp1251 не работает, сложно рассматривать как инструмент для нового дизайна ресурса на cp1251.

[Zada]

Кстати, в примере стало хуже чем было: ) шутка.

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

[pgg]

Вы имеет ввиду неподдерживаются кириллические симолы? Я делал проект с использованием кириллицы

[pgg]

сорри, столько ошибок :-)

[Zada]

Спасибо за коментарий, проапдейтил пост.

[4pcbr]

Нет, я имел ввиду слова автора:

«И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще вCP-1251 – ваши проблемы.»

Я склонен ему верить: )

[Zada]

Да, у меня написано, что требуется исключительно UTF8 (это взято из документации), однако по ссылке автора комента используется кодировка cp1251, так что вполне возможно, что можно работать и с ней. Про тонкости лучше узнать у pgg, но результат — на лицо )

[4pcbr]

И правда cp1251. Очень обрадовало.

pgg, спасибо!: )

[Zada]

Вам спасибо, очень дельное и возможно для кого-то полезное замечание.

[pgg]

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

В моём случае не могу разобраться как же заставить работать .OTF фичи: капитель, минускульные и маюскульные цифры, а так же лигатуры.
Может кто видел полную спецификацию OpenType шрифтов?

[fornex]

у Вас сайт протроянен. После стоит фрейм

[fornex]

парсер лохе. После <_/head_>

[pgg]

Шыт. У хостеров проблемы видимо.

[Koc]

все это было рассмотрено давным-давно на vremenno.net

[EugeneDest]

Я поставил минус по той причине, что вы не указали прямую ссылку на «рассмотр».

[Koc]

ой, вы уж простите, я на хабр захожу 2 раза в день и не имею возможности постоянно мониторить комменты под моими сообщениями.

А по поводу того, что там кратко описаны typeface, cufon, sIFR и FLIR — так есть же оффсайты этих продуктов, на них руководства и примеры.

[seraph]

Я спасу тебя, хабрачеловек!
http://vremenno.net/design/use-any-font-on-website/
Подымайте ему обратно рейтинг )

[Zada]

Вам — спасибо за ссылку. Но там все же несколько поверхостно рассмотрено. Зато про все способы сразу.

[seraph]

Возможно. Мне этого хватило, чтобы рассмотреть самостоятельно typeface, cufon и sIFR. FLIR не рассматривал в принципе, так как, во-первых, на стороне сервера, а во-вторых (и в главных), отправляет картинки с сервера на клиента, существенно сжирая трафик пользователя. Не говоря уже о том, что при отключенной графике пользователь даже не поймёт, что произошло.

На всё про всё ушло часа 2 с учётом поиска различных шрифтов, сложного вроде бы ничего нет. Разве что небольшие танцы с бубном вокруг sIFR. Так что дерзайте.

[levchik]

Я как раз такой скрипт использовал.
Мне он показался самым удобным вариантом использования нестандартных шрифтов.
пример
Скрипт 16 Кб + Файл шрифта 51 Кб = 67 Кб

[deniamnet]

а кириллицу держит? и UTF8?

[Zada]

UTF8 — главное требование при использовании.

[seraph]

Поддерживает то, что есть в шрифте. Хоть Ленина и Серп с молотом отрисует, если в шрифте такие символы есть.

[deniamnet]

спасибо
Ленина и Серп я как-то не очень
просто кириллица нужна и знаки типа © ® и тд

[oyster]

Видимо текст с кастомным шрифтом нельзя скопировать :(

[bolk]

Зачем в IE использовать VML? Почему бы не использовать webfonts там?

[Zada]

Видимо для однообразия в подходах. Из шрифта делают SVG, который потом рендерят или на canvas или в VML. А так если бы для ИЕ webfonts, для сафари и других поддерживающих @font-face, то было бы намного геморнее. Надо и шрифт TTF выдавать и скрипт подключать… но если хочеться, то почему бы не сделать это руками. Вроде это не недостаток, а компромис.

[bolk]

Нужно ли тогда ругаться на «тормознутость и кривизну» IE, если в ней используется другая технология, взамен той, что предназначена для шрифтов? Кстати, я не слишком понимаю зачем рендерить в Canvas или SVG, почему бы картинкой не сделать?

[Zada]

Возможно и не надо ругаться на ИЕ. Инерция.
А про вторую часть не понятно, картинкой, это в каком смысле?

[bolk]

Как-то не туда написалось. Ещё раз продублирую:

Чем способ с «нарисовать всё на картинке» хуже, чем «перевести всё в SVG, Canvas и ещё какую-нибудь технологию отрисовки растра и вектора»?

[Zada]

Шрифт — векторный по своей натуре. Достаточно логично что он преобразовывается в векторный формат, который потом позволит широко управлять отображением его при помощи CSS.

И дополнение про поддержу @font-face в ИЕ, я вот только что почитал, он хочет, что б ему давали файл в формате .eot (Embeded OpenType). Это уже не так интересно, как казалось на первый взгляд.

[bolk]

А, вот оно что. Вектор. Но ведь Canvas это не вектор. Это тег, на который рисуется растр.

IE требует oet, почему бы и нет? Они изобрели web fonts, они были первыми. Чем плох этот формат?

[Zada]

ИЕ, изобрели — очень похвально, причем поддержка доступна начиная с версии ИЕ4, что еще круче.

eot — его недостаток в том, что это проприетарный формат. Safari не захочет eot, Firefox 3.5 не захочет eot.

[bolk]

Ну это же не причина, чтобы не поддерживать его в Cufón :)

[Zada]

Нет не причина, просто Cufón костыль и занимается не этим, нет смысла ему делать то, что браузер умеет без него.

А если имеется ввиду поддержку преобразования шрифта TTF в EOT, то «проприетарность» формата говорит о том, что технология его создания (преобразования) не свободна.

[bolk]

Серьёзно?

www.w3.org/Submission/2008/SUBM-EOT-20080305/

[Zada]

По ссылке находится «Member Submission», что не дает этому документу никакой официальной силы.

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

Кому надо:
Linux: code.google.com/p/ttf2eot/
Windows: www.microsoft.com/typography/WEFT.mspx

[bolk]

Там указана лицензия документа:

«This document is available under the W3C Document License. See the W3C Intellectual Rights Notice and Legal Disclaimers for additional information.»

Я не знаю что это, но, вероятно, это даёт какие-то права на использование этой информации.

[egorinsk]

EOT очень геморройно генерировать, прога от МС котораяэто делает, требует, чтобы страница была размещена на том же домене, где будет использоваться, скачивает эту страницу, генерирует привязанный к домену EOT файл, включая в него только использоавнные там символы, и даже пытается проавить HTML-код и вроде (по слухам) пытается закачать отредактированный файл обратно.

[bolk]

Вы как-то мистифицируете эту программу.

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

Шрифт привязывается к домену (простенькая защита от воровства шрифта).

[Mithgol]

К сожалению, в этом IE не одинок: Firefox 3.5 тоже привязывает шрифт (@font-face) к домену, если не использовать заголовки Access-Control в HTTP-отклике при отдаче шрифта. И видео (<video>) привязывает. Мозги, промытые правоторговцами.

[bolk]

Чем способ с «нарисовать всё на картинке» хуже, чем «перевести всё в SVG, Canvas и ещё какую-нибудь технологию отрисовки растра и вектора»?

[egorinsk]

Да ничем не хуже, мне она даже больше нравится, только картинку лучше в PNG-8, или SVG (на сервере) делать имхо.

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

[Zada]

лучше сразу в HTML вставлять див с картинкой, через Image Replacement, или яваскриптом проходиться по заголовкам и заменять на картинки

Здесь происходит практически тоже самое, за исключением задействования серверной части.

[Prometheus]

Не фонтан, конечно, но при острой необходимости юзать можно.

[Zada]

С страницы проекта:

The following browsers are supported:
* Internet Explorer 6, 7 and 8
* Mozilla Firefox 1.5+
* Safari 3+
* Opera 9.5+
* Google Chrome 1.0+

От себя добавлю:
* Konqueror
* Arora

[bolk]

Странно, что Opera 9.5, SVG «Опера» давно поддерживает.

[Zada]

Здесь важен не SVG, а canvas. SVG промежуточный формат в котором хранится шрифт перед его рисованием на canvas.

[bolk]

Что-то я вообще теряю нить.

Зачем нужно это решение, если можно сразу, на стороне сервера, напечатать вектор на растр (TTF в PNG, например), зачем это делать на стороне клиента (TTF -> SVG -> Canvas)?

[Zada]

Это дает нам несколько приемуществ:
* Нет необходимости в скриптах на серверной части (простой html сейчас тоже в ходу)
* Есть возможность как угодно менять вид шрифта, из-за его векторного изначального представления, скрипт берет данные о необходимом размере, цвете и других параметрах шрифта из правил CSS для элемента к которому применяется. Таким образом нам надо всего один файл шрифта, для отображения его всеми возможными вариантами. Если же для этого лепить картинки на сервере, это убъет всю гибкость в использовании.

[DmitryBaranovskiy]

Не совсем так. SVG там, прямо скажем, не при чём.

[Zada]

В браузере — абсолютно непричем, а вот как технология — используеюся.

[WebMonet]

Что-то подобное я придумал давным-давно, но идею засрали…
В принципе тут все описано webmonet.ru/category/nice/

[Zada]

Нее, не похоже. А вот на FLIR из ссылки seraph — похоже.

[fuzzy]

www.teqli.com/ru/ — не сочтите за рекламу, просто пример использования Cufon — замечательная вещь!

Как раз недавно пользовался, дизайнер «подложил свинью» — в меню дизайнер использовал нестандартные шрифты, а клиенту очень понравилось. Пришлось искать варианты, таки нашел :).

[fantaseour]

В шрифтах большое значение имеет хинтинг, без него шрифты на экране выглядят расплывчатыми и неравномерными.

Надо отдать должное — кернинг они сделали.

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

[nicothin]

… потому, что полно других IE проблем…

[egorinsk]

Это все надо делать в конце страницы, нечего ждать пока эта лабудень загрузится. И да, это изврат (+ возможные тормоза при прорисовке, все таки яваскрипт небыстр).

[webbolt]

а это все с поисковиками дружит?

[Zada]

Дружит.

[Lans]

Действительно, чего бы ему и не дружить?)

[absolvo]

Он отличается принципиально чем-то от typeface.neocracy.org/?
Сравнений никаких не видели?

[Zada]

Принципиальных отличий нет.
Сравнений тоже не встречал, однако habrahabr.ru/blogs/webdev/61033/#comment_1669148

[xintrea]

Исправьте,

Страница проекта на github

[Zada]

Спасибо, поправил.

[tarya]

Пробовал СИФР, с использованием плагина под Jquery, радовался до слез. Потом полез на другие машинки посмотреть сайт и испугался, у одного тазика рендер тормазил на другой вообще ничего не было, как будто бы JS не работало. Пришлось отказаться, что-то думается что будет глючить.

[pepelsbey]

Прощай, производительность )

Зря вы хороните @font-face: IE6, FF 3.1, Opera 10, Webkit — все умеют делать внедрённые шрифты. Хуже или лучше, но уже вот-вот.

На самом деле, вот очень перспективный проект: Typekit

[Zada]

Так его ж не хоронят ) Его ждут. Вот-вот.

[pepelsbey]

Ну, вы всё равно как-то походя упомянули самый прямой и перспективный способ )

[Mithgol]

Добрый совет: обратите внимание, что ужé не FF 3.1, а FF 3.5 (его перенумеровали в бóльшую сторону, чтобы достойно отразить величину внесённых изменений).

[pepelsbey]

Сорри, позабыл.

[6coder]

a:hover работать будет? кто-то уже пробовал?

[Zada]

Если менять фон под текстом — сработает. Если менять цвет текста — надо использовать JS для вызова рендерера с измененными параметрами.

[dasty]

wiki.github.com/sorccu/cufon/styling

[anephew]

отключая картинки — шрифтов не видно на странице?

[Zada]

Смотря как браузер расценивает canvas. Опера для примера не показывает.

[volante]

Я использовал на одном из сайтов этот скрипт, генерил он как надо все, но почему-то сгенерированные тексты по слоям выше, чем все остальное и перекрывали меню сайта...(

[pgg]

Видимо косяки в вёрстке. В моих проектах всё отлично.

[Zada]

Перекрывало меню сайта в ИЕ? Правильно?
Дело в том. что заменяемый текст помещается в SPAN, для которого прописывается position:relative, а ИЕ при порядке отображения таких элементов не обращает внимания на z-index, а основывается только лишь на порядке их следования в документе. Т.е. для решения вашей проблемы надо сделать так, что б меню в файле было описано позже любых элементов с position:relative. Как этого достигнуть, это уже детали, можно для пиремара при показе меню чикать JSом и вставлять в конец документа, с соответствующим абсолютным позиционированием.

[volante]

Вот то и странно, что проблема возникла в ФФ, в ИЕ даже не смотрел, наверняка еще хуже. Мы использовали там выпадающее меню, а когда происходило его выпадание, как раз оно получается накрывалось текстом, выделенным с помощью данного скрипта.

[rassadin]

адепты скриптов, которые стараются сделать на стороне клиента то, что можно сделать на стороне сервера, уже начинают надоедать. пользуетесь — пользуйте тихо. не надо болото разводить.
у «бритвы Оккама» спросите если не понимаете.

[Zada]

Зачем делать на стороне сервера то, что можно делать на стороне клиента? В любом случае, выбор из множества вариантов — только нам же на пользу. Хотим там, делаем, хотим не там, делаем здесь.

Кроме того, для метода например, как в нижеописанном коментарии всеравно используется скрипт на стороне клиента, который идет на сервер за картинками. Так зачем же, раз уж мы используем скрипт, ходить еще и на сервер?!?

Ну и еще одна реплика: зачем нагружать свой сервер лишней работой, если за него эту работу может выполнить браузер клиента?

[Lans]

Который подчас сильнее самого сервера, даже если это VPS

[Mithgol]

Кроме пяти методов, упомянутых в начале хабратопика, есть ещё один: создание картинок (содержащих текст) не своими руками, а джаваскриптом, обращающимся к серверной библиотеке рисования картинок.

Вот пример такого подхода:

facelift.mawhorter.net

Я упоминаю о нём для полноты картины, а не для пропаганды и не для «священной войны» между методами.

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

[Aldekein]

прикрутил его вот сюда, для интереса — fest.fm-kharkov.org.ua/
это если кому интересно, как оно работает в средне-больших объемах текста.

п.с. нормально работает. Опера, ФФ, старенький компьютер.

[GhostZX]

А как с ним работать когда нужны русские буквы а в шрифте их нет?

[LouD]

Так формируйте свой шрифт с русскими буквами.
Я, к примеру, для своего нового сайта сделал js для фонта Cuprum. Все отлично работает.

[LouD]

В статье забыли упомянуть про часто нужную возможность псевдоклассов, пришлось еще и по ссылке на оригинал перейти (изначально ее преподнесли как описание градиентной заливки,

… есть возможность заполнить текст градиентом, но это непонятно зачем нужно, а кому очень уж хочется, отсылаю к странице руководства…

Так вот a:hover у куфона есть, но по дефолту отключено, надо указывать примерно так:

Cufon.replace(".navbar a", {hover: true});

А вот с h1:first-letter такая штука не прошла, пришлось выкручиваться, оборачивая первую букву в span.