[X] Помощник

[ZiTosS Topic Starter]

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


Немного о методах, взято с хабра:

Если стоит задача использовать в проекте нестандартный шрифт, то есть возможность пойти несколькими путями:

1. Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
   
2. Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
   
3. W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
   
4. sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
   
5. Cufón – самое то. Относительно новый метод, который показывает превосходные результаты. Он и есть герой этой статьи.

Нашёл несколько способов, расскажу о них по порядку, все их плюсы и минусы:


Использование @font-face в CSS

Данный способ с некоторыми оговорками, о которых будет сказано ниже, поддерживают браузеры: Firefox 3.5+, Chrome 3.0+, Safari 3.1+, Opera 10+, IE4+

Стоит сказать, что данный метод был изначально реализован компанией Netscape, затем был внедрен в Internet Explorer начиная с версии 4 и выше. Но в других браузерах вставка своих шрифтов через директиву @font-face реализована с приходом CSS3, который поддерживают отнюдь не все браузеры как мы видим.


Использование данной директивы в браузерах - FireFox, Chrome, Safari, Opera:

@font-face {

   font-family: fontName;

   src: url('fontName.ttf');

}

где fontName в атрибуте font-family, указывает на имя шрифта, которое будет использоваться в атрибуте font-family элементов страницы

fontName.ttf - путь до файла шрифта и сам файл шрифта в формате TTF(TrueType Font).


Использование данной директивы в браузере - InternetExplorer:

@font-face {

font-family: fontName;

src: url('fontName.eot');

}

все параметры те же самые, только шрифт формата не TrueType Font (TTF), а Embedded OpenType (EOT)


Пример использования шрифта fontName:

body {

   font-family: fontName;

}

Наиболее оптимальный кроссбраузерный код внедрения шрифта на страницу через свойство @font-face, предложенный Полом Айришем (Paul Irish), на примере свободно распространяемого шрифта Fertigo Pro Regular:

@font-face {

    font-family: 'Fertigo Pro Regular';

    src: url('Fertigo_PRO.eot');

    src: local('Fertigo Pro Regular'),

             local('FertigoPro-Regular'),

             url('Fertigo_PRO.woff') format('woff'),

             url('Fertigo_PRO.svg#FertigoPro-Regular') format('svg'),

             url('Fertigo_PRO.otf') format('opentype');

}

Плюсы:

+ Свои шрифты на страницах без сторонних разработок

+ Поддержка большим количеством браузеров

+ Легкая настройка стиля отображения шрифта через CSS


Минусы:

- Используемый шрифт загружается на компьютер пользователя

-- Проблемы с распространением платных лицензированных шрифтов

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

- Отбрасываем из поддержки пользователей с более старыми версиями браузеров

- Большой вес шрифта

- 2 файла шрифта для разных браузеров, формата EOT и TTF


Ресурсы:

• Полнейшая и интереснейшая статья по использованию @font-face
  
• Статья - font-face оживление
  
• Сервис @font-face Kit Generator, который позволяет одним махом получить архив с набором из оригинального TTF/OTF шрифта, шрифта EOT, шрифта SVG и даже шрифта WOFF
  
• Статья со списком сайтов, на которых опубликованы коллекции шрифтов, лицензия которых допускает их свободное использование в т.ч. и в сети интернет
  
• Спецификация W3C по @font-face

Технология sIFR (scalable Inman Flash Replacement) - свои шрифты через Flash


Описание работы:

Идея sIFR состоит в том, что небольшой джаваскрипт пробегает по всему документу и заменяет текст желаемых элементов (например, заголовков h1) на флэшки, которые отображают желаемый шрифт графически. Для этого, конечно, у читателя должен быть включён Flash: читателям без Flash (или с FlashBlock в Файерфоксе), а также поисковым роботам, будут показаны обычные текстовые заголовки (замены не будут проводиться). Кроме того,автору сайта надобно сперва преобразовать сам шрифт в особый флэшёвый формат.


Javascript заменяет нужные (X)HTML элементы на Flash, который содержит в себе необходимый шрифт.

• Обычная веб-страница загружается в браузер
  
• Javascript сначала проверяет наличие Flash плеера и затем ищет указанные тэги или классы.
  
• Если Flash плеер не установлен или если Javascript выключен, то страница загружается естественным образом, без последствий. Если Flash плеер установлен, то Javascript проверяет код страницы на наличие обозначенных ранее элементов и создает подходящий по размеру Flash, который накладывается на обозначенные ранее элементы.
  
• Actionscript загружает нужный шрифт размером 6pt, после чего шрифт растягивается до нужного размера.

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


Сайт разрабочика: http://www.mikeindustries.com/blog/sifr/


Использование технологии:

Копировать инфу, не буду, лучше дам вам ссылку - Установка и использование sIFR


Cufón - замена текста векторной графикой


Cufon является достойной альтернативой sIFR, у которого плохо с кроссбраузерностью для которой разработчику придется постараться.

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


Описание работы:

Cufon имеет две индивидуальные части font generator, который конвертирует шрифты в нужный формат и часть для парсинга этого формата.

Generator делает несколько шагов конвертации из шрифта в SVG font затем в VML, этот шаг нужен для совместимости с IE, в итоге результат формируется в JSON, с которым и работает JavaScript.


Сайт разрабочика: http://cufon.shoqolate.com/generate/


Плюсы:

+ Самое главное — отсутствие Flash. Всё работает на встроенных возможностях браузеров (при чем даже не самых последних версиях).

+ Быстрая и простая установка. Не нужно разбираться в тонкостях более «навороченных» sIFR и FLIR.

+ Текст видим как «текст», его можно выбрать, скопировать и т.д. Поисковики обрабатывают всё именно как текст. Правда, выбрать текст можно только в браузерах, поддерживающих canvas

+ Поддержка всех свойств текста в CSS2. (font-size, letter-spacing, font-stretch, font-weight, line-height и т.д)

+ Возможность создать градиент заливки текста, а так де тень от текста


Минусы:

- Проблемы с распространением платных лицензированных шрифтов (но есть привязка к домену)

- Некоторые проблемы с Opera - при использовании градиента и теней, подсветка ссылок не осуществляется(это я про hover).


Использование технологии:

Статья об использовании Cufon

Статья с подробнейшим видео-примером по использованию Cufon


Так же ещё полно библиотек: Typeface.js, Facelift,

[Nicholas_mw]

Спасибо, самое интересное что НИ РАЗУ не видел нигде использование этого дела... Почему-то люди не любят данный механизм (ни освещать, ни использовать)...

Ведь на самом деле можно пойти дальше в этом направлении вооружившись редактором TTF и рисуя собственные иконки и спецсимволы, ну и шрифт можно коммерческий "чуть-чуть" поправить чтоб он стал "твоим"

Кстате а Вы видели какие-нить крупные сайты где используется это? (просто интересно даже поглядеть)

[ZiTosS Topic Starter]

Nicholas,
сам использовал Cufon: http://kuafur.ru/
В меню в верхнем и нижем и в раскрывающемся боковом.

А так:
http://www.sassoon.com/ - крупный сайт школы макияжа и причесок за рубежом
http://tv.adobe.com/
http://www.acidsmile.co.uk/
http://www.arsgrafik.com/
http://www.bananapoker.com/
http://www.bed-buzz.com/
http://www.bedmgmt.com/
http://www.bedsupperclub.com/index_switcher.php
http://www.bjornenki.com/

Полный список тут по Cufon

[Pelekhov]

Спасибо! Очень полезная информация!

[toorr2p]

Еще есть пример как с jquery , mootools и без них, использовать Cufon Cufon нестандартные шрифты на сайт

[on_line]

Спасибо! Очень помогло!

[Teotim]

Спасибо за статью, очень помогла.

[Agriiii]

А грузить закачаные с сайта шрифты юзеров с слабым нетом не будут? до скольки может весить нестандартный шрифт?

И да, насчёт шрифтов лицензированых - примеры есть?

[InnerHeavy]

А грузить закачаные с сайта шрифты юзеров с слабым нетом не будут? до скольки может весить нестандартный шрифт?

И да, насчёт шрифтов лицензированых - примеры есть?

В наше время флеш-баннера весят больше чем какая-либо гарнитура. Так что это не проблема.

Лицензированные шрифты, к примеру, все с www.paratype.ru
Но если переименовывать шрифт, то с точки зрения законодательства, никто тебе ничего предьявить не может.

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

[Agriiii]

В наше время флеш-баннера весят больше чем какая-либо гарнитура. Так что это не проблема.

Лицензированные шрифты, к примеру, все с www.paratype.ru
Но если переименовывать шрифт, то с точки зрения законодательства, никто тебе ничего предьявить не может.

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

Законы разные, спорно, но врятле за шрифт кто-то действительно придерется, особенно если переименовать. Из всех выше способов помоему самый удобный - просто дать возможность скачать шрифт пользователю. Вопрос - если шрифт ещё не скачался, отображается стандартный написано, а почему юзеров со старыми браузерами отбрасываем? Не поддерживают такое вобще? Спецификация версии CSS?