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



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

#1

Поделиться сообщением #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

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Как самостоятельно создать шаблон joomla. Создание темы для джумлы своими руками
  2. Шрифт иногда увеличивается сам по себе
  3. Нормальный ли шрифт на сайте?
  4. Помогите. Выбранный шрифт не отображается на сайте.
  5. Как увеличить шрифт текста на сайте по средствам CMS WordPress?

#2

Поделиться сообщением #2



Nicholas

Nicholas
  • Неактивные
  • 10 сообщений
  • Репутация: 0

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

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

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

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

#3

Поделиться сообщением #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

Поделиться сообщением #4



Pelekhov

Pelekhov
  • Неактивные
  • 16 сообщений
  • Репутация: 0

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

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

#5

Поделиться сообщением #5



Вячеслав

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

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

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

#6

Поделиться сообщением #6



online

online
  • Неактивные
  • 10 сообщений
  • Репутация: 0

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

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

#7

Поделиться сообщением #7



Teotim

Teotim
  • Неактивные
  • 60 сообщений
  • Репутация: 1

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

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

#8

Поделиться сообщением #8



Agriiii

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

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

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

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

#9

Поделиться сообщением #9



InnerHeavy

InnerHeavy
  • Неактивные
  • 24 сообщений
  • Репутация: 0

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

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

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

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

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

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

#10

Поделиться сообщением #10



Agriiii

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

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

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

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

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

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

robot

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


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