Хабр Курсы для всех
РЕКЛАМА
Большая витрина: от крупнейших школ до частных авторов. Сравнивайте по цене, длительности, формату и выбирайте самый подходящий курс!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 106
Вопрос. А какого размера получается файл содержащий шрифт, который в нашем случае Rockwell_400-Rockwell_700.font.js?
Всё зависит напрямую от сложности шрифта (от количества элементов). Можно получить файл на 20 Кб, можно на 300. В среднем для гротесков и антикв 40-60 кб. По моему опыту.
31.2 кб. Генерится он уже сжатым.
Изначально файлы шрифтов весили 132 кб.
При генерировании были использованы настройки по умолчанию (за одним исключением, которое я уже не помню).
Изначально файлы шрифтов весили 132 кб.
При генерировании были использованы настройки по умолчанию (за одним исключением, которое я уже не помню).
Вообще на хабре с годик назад это было, но за проделанный объём работы всё равно плюс.
От себя добавлю, что остановился именно на Куфоне, ибо сам он и его шрифты весят меньше, чем у typeface и шрифт генерится правильный, а не пойми что, как у sIFR (и без плясок с флешем). Есть правда пока мелочи типа невозможности визуально выделить текст, но это обещали исправить вроде.
В общем лучшее после font-face решение. ИМХО.
От себя добавлю, что остановился именно на Куфоне, ибо сам он и его шрифты весят меньше, чем у typeface и шрифт генерится правильный, а не пойми что, как у sIFR (и без плясок с флешем). Есть правда пока мелочи типа невозможности визуально выделить текст, но это обещали исправить вроде.
В общем лучшее после font-face решение. ИМХО.
На счет выделения текста: это врядли пофиксают, так как там заменяется на <canvas>, что по сути есть картинка. Так что это больше к создателям браузера, а не куфона.
Невозможность визуального выделения для текста — это, по-моему, не мелочь.
Генерация уродливого шрифта sIFRом не мелочь, на этом фоне невозможность выделить штекст — мелочь. Так как применять особые шрифты разумно для рекламных блоков, менюшек и прочего, но никак не для основного текста, то можно с большой вероятностью сказать, что выделять этот текст мышкой будут очень немногие. Хотя факт косяка, это, конечно, не отменяет.
Тем не менее текст при использовании SIFR выделить и скопировать можно, впрочем соглашусь с вами для заголовков это не так важно, а использовать целиком свой шрифт для всего текста это перебор.
Выделить телефон или электронную почту — это добрая половина юскейсов источника информации «сайт в интернете».
Да. Я лично от этого сифона отказался сразу, как увидел что там не работает выделение.
Кстати, в примере стало хуже чем было: ) шутка.
Жаль, что сp1251 не работает, сложно рассматривать как инструмент для нового дизайна ресурса на cp1251.
Жаль, что сp1251 не работает, сложно рассматривать как инструмент для нового дизайна ресурса на cp1251.
Кстати, в примере стало хуже чем было: ) шутка.
Возможно доля правды в этом есть, по части сглаживания. При генерации шрифта есть возможность поиграться с настройками, включая dpi, возможно это помогло бы добиться лучших результатов. Но надо посвятить некоторое время экспериментам.
Вы имеет ввиду неподдерживаются кириллические симолы? Я делал проект с использованием кириллицы
сорри, столько ошибок :-)
Нет, я имел ввиду слова автора:
«И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще вCP-1251 – ваши проблемы.»
Я склонен ему верить: )
«И еще все страницы, где используется Cufón – должны быть в кодировке UTF-8, либо обратно совместимые с ней, например US-ASCII. А если ваши страницы все еще вCP-1251 – ваши проблемы.»
Я склонен ему верить: )
Да, у меня написано, что требуется исключительно UTF8 (это взято из документации), однако по ссылке автора комента используется кодировка cp1251, так что вполне возможно, что можно работать и с ней. Про тонкости лучше узнать у pgg, но результат — на лицо )
Вам спасибо, очень дельное и возможно для кого-то полезное замечание.
На здоровье :-). Я просто сам разрабатываю подобрый проект поддержки любых шрифтов на вебе,
и в тему проник глубоко.
В моём случае не могу разобраться как же заставить работать .OTF фичи: капитель, минускульные и маюскульные цифры, а так же лигатуры.
Может кто видел полную спецификацию OpenType шрифтов?
и в тему проник глубоко.
В моём случае не могу разобраться как же заставить работать .OTF фичи: капитель, минускульные и маюскульные цифры, а так же лигатуры.
Может кто видел полную спецификацию OpenType шрифтов?
у Вас сайт протроянен. После стоит фрейм
все это было рассмотрено давным-давно на vremenno.net
Я поставил минус по той причине, что вы не указали прямую ссылку на «рассмотр».
Я спасу тебя, хабрачеловек!
http://vremenno.net/design/use-any-font-on-website/
Подымайте ему обратно рейтинг )
http://vremenno.net/design/use-any-font-on-website/
Подымайте ему обратно рейтинг )
Вам — спасибо за ссылку. Но там все же несколько поверхостно рассмотрено. Зато про все способы сразу.
Возможно. Мне этого хватило, чтобы рассмотреть самостоятельно typeface, cufon и sIFR. FLIR не рассматривал в принципе, так как, во-первых, на стороне сервера, а во-вторых (и в главных), отправляет картинки с сервера на клиента, существенно сжирая трафик пользователя. Не говоря уже о том, что при отключенной графике пользователь даже не поймёт, что произошло.
На всё про всё ушло часа 2 с учётом поиска различных шрифтов, сложного вроде бы ничего нет. Разве что небольшие танцы с бубном вокруг sIFR. Так что дерзайте.
На всё про всё ушло часа 2 с учётом поиска различных шрифтов, сложного вроде бы ничего нет. Разве что небольшие танцы с бубном вокруг sIFR. Так что дерзайте.
Я как раз такой скрипт использовал.
Мне он показался самым удобным вариантом использования нестандартных шрифтов.
пример
Скрипт 16 Кб + Файл шрифта 51 Кб = 67 Кб
Мне он показался самым удобным вариантом использования нестандартных шрифтов.
пример
Скрипт 16 Кб + Файл шрифта 51 Кб = 67 Кб
а кириллицу держит? и UTF8?
Видимо текст с кастомным шрифтом нельзя скопировать :(
Зачем в IE использовать VML? Почему бы не использовать webfonts там?
Видимо для однообразия в подходах. Из шрифта делают SVG, который потом рендерят или на canvas или в VML. А так если бы для ИЕ webfonts, для сафари и других поддерживающих @font-face, то было бы намного геморнее. Надо и шрифт TTF выдавать и скрипт подключать… но если хочеться, то почему бы не сделать это руками. Вроде это не недостаток, а компромис.
Нужно ли тогда ругаться на «тормознутость и кривизну» IE, если в ней используется другая технология, взамен той, что предназначена для шрифтов? Кстати, я не слишком понимаю зачем рендерить в Canvas или SVG, почему бы картинкой не сделать?
Возможно и не надо ругаться на ИЕ. Инерция.
А про вторую часть не понятно, картинкой, это в каком смысле?
А про вторую часть не понятно, картинкой, это в каком смысле?
Как-то не туда написалось. Ещё раз продублирую:
Чем способ с «нарисовать всё на картинке» хуже, чем «перевести всё в SVG, Canvas и ещё какую-нибудь технологию отрисовки растра и вектора»?
Чем способ с «нарисовать всё на картинке» хуже, чем «перевести всё в SVG, Canvas и ещё какую-нибудь технологию отрисовки растра и вектора»?
Шрифт — векторный по своей натуре. Достаточно логично что он преобразовывается в векторный формат, который потом позволит широко управлять отображением его при помощи CSS.
И дополнение про поддержу @font-face в ИЕ, я вот только что почитал, он хочет, что б ему давали файл в формате .eot (Embeded OpenType). Это уже не так интересно, как казалось на первый взгляд.
И дополнение про поддержу @font-face в ИЕ, я вот только что почитал, он хочет, что б ему давали файл в формате .eot (Embeded OpenType). Это уже не так интересно, как казалось на первый взгляд.
А, вот оно что. Вектор. Но ведь Canvas это не вектор. Это тег, на который рисуется растр.
IE требует oet, почему бы и нет? Они изобрели web fonts, они были первыми. Чем плох этот формат?
IE требует oet, почему бы и нет? Они изобрели web fonts, они были первыми. Чем плох этот формат?
ИЕ, изобрели — очень похвально, причем поддержка доступна начиная с версии ИЕ4, что еще круче.
eot — его недостаток в том, что это проприетарный формат. Safari не захочет eot, Firefox 3.5 не захочет eot.
eot — его недостаток в том, что это проприетарный формат. Safari не захочет eot, Firefox 3.5 не захочет eot.
Ну это же не причина, чтобы не поддерживать его в Cufón :)
Нет не причина, просто Cufón костыль и занимается не этим, нет смысла ему делать то, что браузер умеет без него.
А если имеется ввиду поддержку преобразования шрифта TTF в EOT, то «проприетарность» формата говорит о том, что технология его создания (преобразования) не свободна.
А если имеется ввиду поддержку преобразования шрифта TTF в EOT, то «проприетарность» формата говорит о том, что технология его создания (преобразования) не свободна.
По ссылке находится «Member Submission», что не дает этому документу никакой официальной силы.
Однако благодаря ей я увидел, что таки есть свободные инструменты для преобразования. Так что как бы — спасибо )
Кому надо:
Linux: code.google.com/p/ttf2eot/
Windows: www.microsoft.com/typography/WEFT.mspx
Однако благодаря ей я увидел, что таки есть свободные инструменты для преобразования. Так что как бы — спасибо )
Кому надо:
Linux: code.google.com/p/ttf2eot/
Windows: www.microsoft.com/typography/WEFT.mspx
EOT очень геморройно генерировать, прога от МС котораяэто делает, требует, чтобы страница была размещена на том же домене, где будет использоваться, скачивает эту страницу, генерирует привязанный к домену EOT файл, включая в него только использоавнные там символы, и даже пытается проавить HTML-код и вроде (по слухам) пытается закачать отредактированный файл обратно.
Вы как-то мистифицируете эту программу.
EOT можно генирировать чем угодно, формат описан. Программа спрашивает какие символы будут использоваться, их выбирают, тыкая мышкой или подставляя готовую страницу. Никакой HTML программа не правит и ничего никуда не закачивает.
Шрифт привязывается к домену (простенькая защита от воровства шрифта).
EOT можно генирировать чем угодно, формат описан. Программа спрашивает какие символы будут использоваться, их выбирают, тыкая мышкой или подставляя готовую страницу. Никакой HTML программа не правит и ничего никуда не закачивает.
Шрифт привязывается к домену (простенькая защита от воровства шрифта).
К сожалению, в этом IE не одинок: Firefox 3.5 тоже привязывает шрифт (@font-face) к домену, если не использовать заголовки Access-Control в HTTP-отклике при отдаче шрифта. И видео (<video>) привязывает. Мозги, промытые правоторговцами.
Чем способ с «нарисовать всё на картинке» хуже, чем «перевести всё в SVG, Canvas и ещё какую-нибудь технологию отрисовки растра и вектора»?
Да ничем не хуже, мне она даже больше нравится, только картинку лучше в PNG-8, или SVG (на сервере) делать имхо.
Мне тоже идея рендерить шрифт яваскриптом кажется немного ненормальной, лучше сразу в HTML вставлять див с картинкой, через Image Replacement, или яваскриптом проходиться по заголовкам и заменять на картинки.
Мне тоже идея рендерить шрифт яваскриптом кажется немного ненормальной, лучше сразу в HTML вставлять див с картинкой, через Image Replacement, или яваскриптом проходиться по заголовкам и заменять на картинки.
Не фонтан, конечно, но при острой необходимости юзать можно.
С страницы проекта:
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
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
Странно, что Opera 9.5, SVG «Опера» давно поддерживает.
Здесь важен не SVG, а canvas. SVG промежуточный формат в котором хранится шрифт перед его рисованием на canvas.
Что-то я вообще теряю нить.
Зачем нужно это решение, если можно сразу, на стороне сервера, напечатать вектор на растр (TTF в PNG, например), зачем это делать на стороне клиента (TTF -> SVG -> Canvas)?
Зачем нужно это решение, если можно сразу, на стороне сервера, напечатать вектор на растр (TTF в PNG, например), зачем это делать на стороне клиента (TTF -> SVG -> Canvas)?
Это дает нам несколько приемуществ:
* Нет необходимости в скриптах на серверной части (простой html сейчас тоже в ходу)
* Есть возможность как угодно менять вид шрифта, из-за его векторного изначального представления, скрипт берет данные о необходимом размере, цвете и других параметрах шрифта из правил CSS для элемента к которому применяется. Таким образом нам надо всего один файл шрифта, для отображения его всеми возможными вариантами. Если же для этого лепить картинки на сервере, это убъет всю гибкость в использовании.
* Нет необходимости в скриптах на серверной части (простой html сейчас тоже в ходу)
* Есть возможность как угодно менять вид шрифта, из-за его векторного изначального представления, скрипт берет данные о необходимом размере, цвете и других параметрах шрифта из правил CSS для элемента к которому применяется. Таким образом нам надо всего один файл шрифта, для отображения его всеми возможными вариантами. Если же для этого лепить картинки на сервере, это убъет всю гибкость в использовании.
Не совсем так. SVG там, прямо скажем, не при чём.
Что-то подобное я придумал давным-давно, но идею засрали…
В принципе тут все описано webmonet.ru/category/nice/
В принципе тут все описано webmonet.ru/category/nice/
Нее, не похоже. А вот на FLIR из ссылки seraph — похоже.
www.teqli.com/ru/ — не сочтите за рекламу, просто пример использования Cufon — замечательная вещь!
Как раз недавно пользовался, дизайнер «подложил свинью» — в меню дизайнер использовал нестандартные шрифты, а клиенту очень понравилось. Пришлось искать варианты, таки нашел :).
Как раз недавно пользовался, дизайнер «подложил свинью» — в меню дизайнер использовал нестандартные шрифты, а клиенту очень понравилось. Пришлось искать варианты, таки нашел :).
В шрифтах большое значение имеет хинтинг, без него шрифты на экране выглядят расплывчатыми и неравномерными.
Надо отдать должное — кернинг они сделали.
Вообще человеческое общество — забавная вещь — проблеме со шрифтами в вебе уже лет 10, даже больше, но всякие нюансы чисто общественного характера не позволяют ее решить.
Надо отдать должное — кернинг они сделали.
Вообще человеческое общество — забавная вещь — проблеме со шрифтами в вебе уже лет 10, даже больше, но всякие нюансы чисто общественного характера не позволяют ее решить.
Это все надо делать в конце страницы, нечего ждать пока эта лабудень загрузится. И да, это изврат (+ возможные тормоза при прорисовке, все таки яваскрипт небыстр).
а это все с поисковиками дружит?
Он отличается принципиально чем-то от typeface.neocracy.org/?
Сравнений никаких не видели?
Сравнений никаких не видели?
Принципиальных отличий нет.
Сравнений тоже не встречал, однако habrahabr.ru/blogs/webdev/61033/#comment_1669148
Сравнений тоже не встречал, однако habrahabr.ru/blogs/webdev/61033/#comment_1669148
Исправьте,
Страница проекта на github
Страница проекта на github
Пробовал СИФР, с использованием плагина под Jquery, радовался до слез. Потом полез на другие машинки посмотреть сайт и испугался, у одного тазика рендер тормазил на другой вообще ничего не было, как будто бы JS не работало. Пришлось отказаться, что-то думается что будет глючить.
Прощай, производительность )
Зря вы хороните @font-face: IE6, FF 3.1, Opera 10, Webkit — все умеют делать внедрённые шрифты. Хуже или лучше, но уже вот-вот.
На самом деле, вот очень перспективный проект: Typekit
Зря вы хороните @font-face: IE6, FF 3.1, Opera 10, Webkit — все умеют делать внедрённые шрифты. Хуже или лучше, но уже вот-вот.
На самом деле, вот очень перспективный проект: Typekit
a:hover работать будет? кто-то уже пробовал?
отключая картинки — шрифтов не видно на странице?
Я использовал на одном из сайтов этот скрипт, генерил он как надо все, но почему-то сгенерированные тексты по слоям выше, чем все остальное и перекрывали меню сайта...(
Видимо косяки в вёрстке. В моих проектах всё отлично.
Перекрывало меню сайта в ИЕ? Правильно?
Дело в том. что заменяемый текст помещается в SPAN, для которого прописывается position:relative, а ИЕ при порядке отображения таких элементов не обращает внимания на z-index, а основывается только лишь на порядке их следования в документе. Т.е. для решения вашей проблемы надо сделать так, что б меню в файле было описано позже любых элементов с position:relative. Как этого достигнуть, это уже детали, можно для пиремара при показе меню чикать JSом и вставлять в конец документа, с соответствующим абсолютным позиционированием.
Дело в том. что заменяемый текст помещается в SPAN, для которого прописывается position:relative, а ИЕ при порядке отображения таких элементов не обращает внимания на z-index, а основывается только лишь на порядке их следования в документе. Т.е. для решения вашей проблемы надо сделать так, что б меню в файле было описано позже любых элементов с position:relative. Как этого достигнуть, это уже детали, можно для пиремара при показе меню чикать JSом и вставлять в конец документа, с соответствующим абсолютным позиционированием.
адепты скриптов, которые стараются сделать на стороне клиента то, что можно сделать на стороне сервера, уже начинают надоедать. пользуетесь — пользуйте тихо. не надо болото разводить.
у «бритвы Оккама» спросите если не понимаете.
у «бритвы Оккама» спросите если не понимаете.
Зачем делать на стороне сервера то, что можно делать на стороне клиента? В любом случае, выбор из множества вариантов — только нам же на пользу. Хотим там, делаем, хотим не там, делаем здесь.
Кроме того, для метода например, как в нижеописанном коментарии всеравно используется скрипт на стороне клиента, который идет на сервер за картинками. Так зачем же, раз уж мы используем скрипт, ходить еще и на сервер?!?
Ну и еще одна реплика: зачем нагружать свой сервер лишней работой, если за него эту работу может выполнить браузер клиента?
Кроме того, для метода например, как в нижеописанном коментарии всеравно используется скрипт на стороне клиента, который идет на сервер за картинками. Так зачем же, раз уж мы используем скрипт, ходить еще и на сервер?!?
Ну и еще одна реплика: зачем нагружать свой сервер лишней работой, если за него эту работу может выполнить браузер клиента?
Кроме пяти методов, упомянутых в начале хабратопика, есть ещё один: создание картинок (содержащих текст) не своими руками, а джаваскриптом, обращающимся к серверной библиотеке рисования картинок.
Вот пример такого подхода:
facelift.mawhorter.net
Я упоминаю о нём для полноты картины, а не для пропаганды и не для «священной войны» между методами.
Тем не менее, векторный образ сложного шрифта может весить больше, нежели растр короткого слова (или даже пары-тройки-другой слов), так что именно растровое серверное решение может оказаться практически полезным во многих случаях.
Вот пример такого подхода:
facelift.mawhorter.net
Я упоминаю о нём для полноты картины, а не для пропаганды и не для «священной войны» между методами.
Тем не менее, векторный образ сложного шрифта может весить больше, нежели растр короткого слова (или даже пары-тройки-другой слов), так что именно растровое серверное решение может оказаться практически полезным во многих случаях.
прикрутил его вот сюда, для интереса — fest.fm-kharkov.org.ua/
это если кому интересно, как оно работает в средне-больших объемах текста.
п.с. нормально работает. Опера, ФФ, старенький компьютер.
это если кому интересно, как оно работает в средне-больших объемах текста.
п.с. нормально работает. Опера, ФФ, старенький компьютер.
А как с ним работать когда нужны русские буквы а в шрифте их нет?
В статье забыли упомянуть про часто нужную возможность псевдоклассов, пришлось еще и по ссылке на оригинал перейти (изначально ее преподнесли как описание градиентной заливки,
Так вот a:hover у куфона есть, но по дефолту отключено, надо указывать примерно так:
А вот с h1:first-letter такая штука не прошла, пришлось выкручиваться, оборачивая первую букву в span.
… есть возможность заполнить текст градиентом, но это непонятно зачем нужно, а кому очень уж хочется, отсылаю к странице руководства…
Так вот a:hover у куфона есть, но по дефолту отключено, надо указывать примерно так:
Cufon.replace(".navbar a", {hover: true});
А вот с h1:first-letter такая штука не прошла, пришлось выкручиваться, оборачивая первую букву в span.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Cufón – используйте шрифты, какие душа пожелает