Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Дизайн и верстка

Важная информация
Дизайн и верстка - Верстка: блочная, div, HTML... Дизайн, внешний вид сайта.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 17.07.2013, 23:22   #1
 
Аватар для demikk
 
Сообщений: 15
FR (активность): 371

Доп. информация
По умолчанию Автор темы Cufon: экзотические шрифты просто и быстро.

Небольшое вступление.

По своей молодости в плане оформления веб-сайтов я очень любил экзотические шрифты. Любил их как и любой школьник - до умопомрачения. Однако, не зная ничего из css, js, а используя только графические редакторы - я захламлял все пространство сайта картинками с "краисвыми", как мне казалось, шрифтами.
Уверен многие из вас страдали похожей болезнью.
Потом я, конечно, ушел от этого. Стал использовать стандартные шрифты, в основном Tahoma и Verdana. Но настал момент, когда экзотические шрифты нужно было внедрить просто позарез.
Тогда появился он.... куфон!

Cufon

Если судить по вносимым изменениям на гитхабе, проекту cufon около 3-4 лет. Авторы позицианируют его как достойная альтернатива sIFR (другой популярный метод оформления текста) по причине того, что последний до сих пор остается слишком сложным в настройке и использовании.

Среди сильных сторон своего проекта создатели отмечают 4 наиболее важных пункта:
  1. Нет необходимости в установке дополнительных плагинов. Он использует инструменты уже заложенные в браузер юзера.
  2. Кроссбраузерность - с куфоном отлично работают все ведущие браузеры на нынешнем рынке.
  3. Простота в использовании - настройка и мудренность использования сведены к минимуму.
  4. Скорость - она должна быть высокой. Даже при работе с большим объемом текста.

Как работает

В общих чертах куфон состоит из двух отдельных друг от друга систем: это генератор шрифтов преобразующий ваш экзотический TIFF, OTF в некий полуфабрикат и движок рендеринга на базе JavaScript, создающий уже готовый продукт.
Вдаваться во все подробности не буду, т.к. статья задумывалась как практическое пособие по использованию, а не выдержка из вики.

Чтобы вы понимали о чем вообще идет речь - можете перейти по ссылке http://casebazar.ru/ и посмотреть как там реализованы заголовки. Это именно cufon.

Нравится? И в этом нет ничего сложного.

Инструкция по использованию
  1. Возьмем самый прекрасный шрифт на свете (так некстати проигнорированный всеми операционными системами). Я к примеру возьму GeoSlb712Bold.
  2. Переходите в официальный генератор шрифта http://cufon.shoqolate.com/generate/
  3. Добавляете все виды шрифта, что вам понадобятся в работе (regular, italic, bold etc)
  4. Выбираем дополнительные параметры
  5. Let's do this!

На выходе мы получаем два java скрипта (мой пример):
Код:
<script type="text/javascript" src="/js/cufon.js"></script>
<script type="text/javascript" src="/js/GeoSlb712BoldC_BT_700.font.js"></script>
Прописываем их в шапку сайта и добавляем еще один последний javascript элемент:
Код:
<script type="text/javascript">
	Cufon.replace('h1'); // Works without a selector engine
	Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
</script>
Как вы поняли, во втором случае мы указываем на какие классы, элементы будет воздействовать наш куфон. В данном примере все заголовки Н1 будут исполнены экзотическим шрифтом (в точности как на сайте кейсбазар.ру (ссылка была выше)).

Взаимодействие с поисковыми системами

Не пугайтесь, когда в увидите в фаербаге или в инспекторе Chrome страшный и неповторимый ужас на месте вашего H1. На самом деле, если вы посмотрите код страницы, то заметите, что H1 прописан красиво в 1 строчку, все как надо.
Вердикт: Отрицательного действия на поисковики не оказывает.

Наслаждаемся

Официальный сайт: shoqolate.com
Rotgar Sett: сообщение полезно
demikk вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
Rotgar Sett (17.07.2013), Umka (18.07.2013)
Старый 18.07.2013, 00:17   #2
 
Аватар для Umka
 
Сообщений: 4,143
FR (активность): 80,659

Доп. информация
По умолчанию

demikk, а символьный шрифт? Допустим математические символы или wingdings эта штука умеет обрабатывать?
Umka вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 18.07.2013, 13:21   #3
 
Аватар для demikk
 
Сообщений: 15
FR (активность): 371

Доп. информация
По умолчанию Автор темы

Umka, заинтересовал ваш вопрос (до этого не испытывал куфон в таком формате). Протестировал сегодня три шрифта:
1. Wingdings - работает
2. Шрифт-Штрихкод - работает
3. Иероглифы - не пошло. Но возможно я не так их настроил.

Под катом скриншот того, как айфон понимает куфон.
Оффтоп:
demikk вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
Umka (18.07.2013)
Старый 18.07.2013, 14:00   #4
 
Аватар для Umka
 
Сообщений: 4,143
FR (активность): 80,659

Доп. информация
По умолчанию

Оффтоп:
Цитата:
Сообщение от demikk Посмотреть сообщение
как айфон понимает куфон
стих просто..
Попробую на формулах его. Хотя наверное квадратные корни или интегралы не выйдет набирать и все равно придется картинкой делать.
Umka вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 18.07.2013, 14:37   #5
 
Аватар для Бермуд
 
Сообщений: 86
FR (активность): 1,722

Доп. информация
По умолчанию

Цитата:
Сообщение от Umka Посмотреть сообщение
Попробую на формулах его. Хотя наверное квадратные корни или интегралы не выйдет набирать и все равно придется картинкой делать.
Вот мне очень интересно узнать результат...
Бермуд вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 18.07.2013, 16:27   #6
 
Аватар для demikk
 
Сообщений: 15
FR (активность): 371

Доп. информация
По умолчанию Автор темы

Umka, Бермуд,

По поводу формул. Я немного погуглил и нашел сайт, где показана реализация необходимого для сервиса.
Называется данная штука jqMath.

Источник: http://mathscribe.com
Надеюсь поможет!

P.S. А сама Wikipedia используют технологию TeX, которая превращает вашу формулы в изображение.
demikk вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
Umka (18.07.2013)
Ответ

Метки
заголовки, заголовки h1, заголовок h2, шрифт, шрифты

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 3230 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Шрифты Alex LM Дизайн и верстка 30 19.01.2022 16:31
экзотические мета неймы. cthulchu Раскрутка в общих чертах 2 22.02.2012 00:18
Art&You.net - уроки, кисти фотошоп, шрифты, иконки и другое PhoenixPower Оценка сайтов 8 11.07.2010 18:11
Шрифты форума Alex LM О работе SEO Cafe 9 08.02.2010 23:44
Просто и быстро в Топ 10 4Fun.Fantasy Раскрутка в общих чертах 36 02.09.2008 16:50

Текущее время: 22:53. Часовой пояс GMT +3.