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


Пользователь месяца
magnet magnet 1-й за Январь
Очков активности: 621 0 тем, 69 сообщений, 6 баллов репутации
Сайт: rbfxdirect.com
ТОП самых активных за этот месяц
  • Фотография BLIK
    #1

    BLIK
    Очков активности: 472.5 0 тем, 35 сообщений, 9 баллов репутации

  • Фотография ShowPrint
    #2

    ShowPrint (ShowPrint.ru)
    Очков активности: 396 Вне конкурса за определение пользователя месяца

  • Фотография OlgaGetman
    #3

    OlgaGetman
    Очков активности: 390 Вне конкурса за определение пользователя месяца

  • Фотография Андрей WPMasterKZ
    #4

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 315 Вне конкурса за определение пользователя месяца

  • Фотография Ixman
    #5

    Ixman (o5cat.ru)
    Очков активности: 288 Вне конкурса за определение пользователя месяца

  • Фотография Mandarin
    #6

    Mandarin
    Очков активности: 210 0 тем, 28 сообщений, 5 баллов репутации

  • Фотография r0mZet
    #7

    r0mZet (rz-style.ru)
    Очков активности: 102 0 тем, 17 сообщений, 4 балла репутации

  • Фотография magnet
    #8

    magnet (rbfxdirect.com)
    Очков активности: 43.5 Вне конкурса за определение пользователя месяца

  • Фотография WGN
    #9

    WGN (worldgamenews.com)
    Очков активности: 40.5 0 тем, 27 сообщений, 1 балл репутации

  • Фотография pozitron123
    #10

    pozitron123
    Очков активности: 34.5 2 темы, 17 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 25.12.2018
  • Яндекс выдача: 16.02.2019
Топ 5 участников по репутации


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

#1 ZiTosS

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

Отправлено 06 February 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 October 2010 - 13:52

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

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

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

#3 ZiTosS

ZiTosS
    Topic Starter
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 11 October 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 November 2010 - 13:35

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

#5 Вячеслав

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

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

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

#6 online

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

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

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

#7 Teotim

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

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

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

#8 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 02 September 2011 - 21:10

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

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

#9 InnerHeavy

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

Отправлено 04 September 2011 - 16:54

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

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

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

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

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

#10 Agriiii

Agriiii
  • Неактивные
  • 378 сообщений
  • Репутация: 40

Отправлено 06 September 2011 - 12:35

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

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

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

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

#11 Stepanov

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

Отправлено 09 October 2011 - 05:57

Спасибо за ценную информацию!
  • 0

#12 bonec

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

Отправлено 24 October 2011 - 15:00

Спасибо!
  • 0

#13 zrishat

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

Отправлено 26 October 2011 - 13:42

при скачивании шрифта страница затем перерисовывается или надо её опять обновить?
  • 0

#14 yury

yury
  • Пользователь
  • 646 сообщений
  • Репутация: 190

Отправлено 27 October 2011 - 10:43

при скачивании шрифта страница затем перерисовывается или надо её опять обновить?

Ничего обновлять не надо.
Работает по тому же принципу, как и все прочие элементы веб-страницы, например,
пока фоновая картинка не загружена, мы видим страницу без фона (или с альтернативной фоновой заливкой, если та задана), как только картинка загрузилась — она сама помещается на свое место.
  • 0

#15 nebo52

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

Отправлено 08 November 2011 - 01:12

google font и никаких заморочек
  • 0

#16 kelevra

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

Отправлено 09 March 2013 - 12:49

Полезная статья, как раз искал! А кто что скажет на счёт google web fonts? можно туда свои шрифты загрузить? а то там очень мало их, и многих нету которые нужны
  • 0

robot

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


Похожие темы

  Название темы Автор Статистика Последнее сообщение

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