15.«Вебные» и «невебные» шрифты. Способы подключение нестандартных шрифтов.

Давно хотел написать об известных мне способах прикручивания уникальных шрифтов на страницы сайта. Это как минимум – заметка для себя, ведь сам довольно часто с этим сталкиваюсь. Существуют разные способы подключения шрифтов для сайта, но здесь будет написано только о тех, с которыми я лично работал.

Способ 1. Подключение шрифта в файле стилей при помощи @font-face

@font-face{ font-family:"Din"; /*указываем название шрифта*/ src:url("/fonts/Din.otf") format("opentype"); font-weight:normal; /* необязательно */ font-style:normal; /* необязательно */ } h1 { font-family: "Din" } /*используем подключенный шрифт*/

К достоинствам данного способа относится то, что можно подключить несколько шрифтов сразу. Для кроссбраузерности нужно скармливать разным браузерам свои файлы стилей, примерно так:

@font-face { font-family: 'Din'; src: url('Din.eot?') format('eot'), url('Din.woff') format('woff'), url('Din.ttf')  format('truetype'), url('Din.svg#svgFontName') format('svg'); }

Примечание: знак “?” после Din.eot обязателен для адекватного срабатывания шрифта в IE, т.к. IE пытается использовать как адрес файла всё, что записано после первой открывающей скобки и до самой последней закрывающей скобки.

Создание разных файлов разных форматов из одного файла шрифта можно поручить сервису Font-face generator.

Минусы этого способа: далеко не все шрифты нормально проходят через   Font-face generator.

Способ 2. Установка шрифтов с использованием js-библиотеки Cufon

Этот способ подключения шрифтов зависит от javascript, а значит, не у всех посетителей сайта он будет работать.

Плюсы: Единственный, на мой взгляд, плюс данного способа это возможность подключить вообще любой шрифт.

Минусы: зависимость от скриптов, и невозможность выделения и копирования текста. Хотя в некоторых случаях это может быть и плюсом, например, если нужно поставить запрет на копирование страницы).

Способ 3. Подключение нестандартных шрифтов при помощи Google Font api.

По заверениям разработчиков, корректно отображает нестандартные шрифты, даже в IE6. Минусом Google Font API является то, что шрифты можно ставить только те, которые имеются в коллекции Google Fonts, а кириллических шрифтов там не так уже и много…

Навигация. 1. Визуальная иерархия элементов Пользователь, как правило, просматривая электронные страницы, не читает все подряд. Основываясь на данном факте, задача разработчика - построить такую систему навигации, чтобы, даже пробежав по странице взглядом, пользователь мог бы легко выделить основные блоки и акценты. Таким образом, визуальная иерархия элементов - это цветовое и смысловое выделение средств навигации в порядке их приоритетности и важности.  2. Разбивка страниц на смысловые области Пользователь вольно или невольно разделяет информацию на странице на «то, что мне нужно» и «то, что мне не нужно». Облегчить задачу пользователю поможет условная разбивка страницы как минимум на два блока: информативный и сервисный. Особое внимание стоит уделить активным элементам: пользователь всегда должен представлять, какой из элементов сайта является активным, а какой нет. Не загадывайте пользователю ребусов: то, что Вам кажется очевидным, не всегда таковым является, поэтому имеет смысл привлекать к тестированию навигации людей «со стороны», которые, не зная специфики и структуры сайта, всегда смогут оценить  его удобство и простоту в использовании. 3. Визуальный шум Выше уже говорилось о расстановке акцентов и выделении смысловых блоков. В данном вопросе главное не перестараться и выделить ДЕЙСТВИТЕЛЬНО важные элементы, иначе сайт будет похож на новогоднюю елку: вроде все ярко, а взгляду зацепиться не за что. Визуальный шум раздражает и способствует уходу посетителя с сайта. Будьте аккуратны с использованием графики, анимированных баннеров и элементов. Не забываете: во всем хороша мера! 4. Информативность В выполнении основной задачи сайта - предоставлении пользователю достоверной и актуальной информации – необходимо руководствоваться принципами умеренности и лаконичности. Избавьтесь от информационного шума, ненужных инструкций и вводных слов, проще говоря, от «воды». В этом вопросе неоценимую помощь окажет также «человек со стороны». Основные требования к информационному наполнению сайта: лаконичность, грамотность и доступность. Принцип: «Краткость – сестра таланта!» 5. Обязательные элементы навигации Обязательные элементы навигации, которые должны присутствовать на сайте вне зависимости от его тематики, это окно поиска по сайту, ссылки «добавить в избранное» и «вернуться на главную страницу», раздел «контакты», дублирующее меню внизу страницы (основные разделы главного меню), логотип компании (на главной странице, как правило, больше по размеру, чем на внутренних). Для того чтобы протестировать сайт на удобство навигации пользователю, впервые попавшему на сайт, необходимо ответить на следующие вопросы: • Что это за сайт? • На какой странице я нахожусь? • Какие главные разделы существуют на этом сайте? • Какие опции есть на данном сайте? • Где именно я нахожусь в общей структуре сайта? • Каким образом осуществляется поиск? Если пользователь, отвечая на эти вопросы, думает не более 3 секунд, то система навигации сайта построена правильно.