Перейти к содержимому


Выбрать шаблон и создать сайт

Собственные шрифты на сайте

#1 ZiTosS

ZiTosS
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8
0

Отправлено 06 Февраль 2010 - 16:23

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

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

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

  • Ъ-метод – не использовать нестандартные шрифты, достаточно в CSS сказать body {font-family: sans-serif;} и не морочить себе голову.
  • Быдло-метод – нарезать из ЖПЕГов, картинок с заголовками, ужать посильнее, что б появилась размытость и вставлять вместо текста картинки. Достаточно популярный на наших просторах метод.
  • W3C-метод – используем @font-family и наслаждаемся красивыми шрифтами без всяких заморочек. Пока этот метод не рассматривают, как рабочий, по причине слабой поддержи со стороны браузера.
  • sIFR – клевая вещь, наиболее употребляемая на сегодняшний день, но как недостаток – требует наличия Flash-плагина. Хотя это трудно назвать недостатком, но если есть инструмент, позволяющий обойтись без плагинов, то это не может не радовать.
  • 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

Ресурсы:

Технология 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.mikeindus....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,

 

 

  • 0

#2 Nicholas

Nicholas
  • Пользователь
  • 10 сообщений
  • Репутация: 0

Отправлено 10 Октябрь 2010 - 13:52

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

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

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

#3 ZiTosS

ZiTosS
    Topic Starter
  • Пользователь
  • 5 148 сообщений
  • Репутация: 8

Отправлено 11 Октябрь 2010 - 14:58

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.bedsupper...ex_switcher.php
http://www.bjornenki.com/

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

#4 Pelekhov

Pelekhov
  • Пользователь
  • 16 сообщений
  • Репутация: 0

Отправлено 12 Ноябрь 2010 - 13:35

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

#5 Вячеслав

Вячеслав
  • Пользователь
  • 357 сообщений
  • Репутация: 0

Отправлено 22 Январь 2011 - 08:53

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

#6 online

online
  • Пользователь
  • 10 сообщений
  • Репутация: 0

Отправлено 26 Январь 2011 - 23:19

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

#7 Teotim

Teotim
  • Пользователь
  • 60 сообщений
  • Репутация: 1

Отправлено 10 Апрель 2011 - 19:32

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

#8 Agriiii

Agriiii
  • Пользователь
  • 378 сообщений
  • Репутация: 40

Отправлено 02 Сентябрь 2011 - 21:10

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

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

#9 InnerHeavy

InnerHeavy
  • Пользователь
  • 24 сообщений
  • Репутация: 0

Отправлено 04 Сентябрь 2011 - 16:54

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

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

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

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

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

#10 Agriiii

Agriiii
  • Пользователь
  • 378 сообщений
  • Репутация: 40

Отправлено 06 Сентябрь 2011 - 12:35

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

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

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

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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Оформление форума – IPBSkins.ru