Как работать со шрифтами генерированными Cufon (Для продвинутых)

Эта инструкция продемонстрирует вам как добавить спецсимволы в существующие тексты генерированные Cufon или заменить шрифт на другой генерированный Cufon.

Cufon это онлайн генератор шрифтов, который может превратить любой скрипт, который есть у вас на компьютере в особый Java скрипт. Для того, что бы вставить такой шрифт на страницы вам нужно просто вставить его в теге script. Перед трансформацией шрифта вы можете внести в него необходимые изменения, например, включить в него наборы символов или глифы, для того, что бы опримизировать шрифт под конкретное веб приложение. Кроме того, эти шрифты остаются SEO дружественны.

Если ваш шаблон содержит Cufon и вы хотите добавить туда дополнительные символы или заменить весь шрифт, то:

1.Во-первых, вам нужно определить, какой шрифт использован в конкретном случае.

Перейдите в папку sources(+symbols)/psd в вашем шаблоне. Откройте .psd файл, который соответствует странице со шрифтом подлежащим замене, через Adobe Photoshop. Выберите инструмент “Type” на панели инструментов и нажмите на текст, что бы выделить его. Выберите шрифт из выпадающего меню Set the Font Family.

(Выпадающее меню семейтса шрифтов на панели опций Photoshop)

2. Во-вторых, вам понадобится проверить поддерживает ли шрифт специальные символы языка, который вы планируете применять в шаблоне (Если вы планируете добавлять специальные символы).

Если вы используете PC, то воспользуйтесь приложением Font Runner. Это бесплатный мереджер шрифтов для Windows, который позволит упорядочить их. Кроме того, с его помощью вы можете детально изучть каждый шрифт, просмотрев поддерживаемые символы.

После установки Font Runner, откройте его и перейдите в папку со шрифтами на вашем компьютере (обычно C:\Windows\Fonts) в левом меню.

Найдите необходимый шрифт в правой панели начав набирать его название. Выберите его и перейдите в режим “Font Map”.

Внимание: если вы не видите специальных символов нужного языка в таблице “Font Map” они не поддерживаются этим шрифтом, и вы должны выбрать другой шрифт с поддержкой. Для того, что бы найти максимально похожий — воспользуйтесь онлайн сервисом WhatThe Font.

3. Теперь вам нужно сгенерировать .js файл из вашего собственного шрифта на странице http://cufon.shoqolate.com/generate/. Для того, что бы сделать это

• скопируйте файл шрифта который вам нужен из папки “Fonts” на рабочий стол или в любую другую папку, доступ к которой будет максимально прост. Это может быть тот же шрифт, что и использованный в шаблоне, в случае, если он поддерживает необходимые символы;
• на странице http://cufon.shoqolate.com/generate/ выберите шрифт, который хотели бы использовать (в настоящее время только форматы ttf(TrueType); otf(OpenType) и PFB (Printer Font Binary)). Используя кнопки “Regular Typeface”, bold, italic и bold italic загрузите все его варианты. Убедитесь, что поставили галочку EULA, что бы подтвердить их разрешение использовать этот шрифт.
  
• Включите следующие глифы (если доступны) для включения соответствующих групп символов в вайл шрифта. Помните, что каждая дополнительная группа символов увеличивает размер файла шрифта. Контролируйте размер получающегося файла для того, что бы не замедлить загрузку всего сайта. Во многих случаях достаточно выбрать только опцию Basic Latin, но если вам потребуется русский язык, то выбирайте еще и Russian alphabet. Остальные опции используйте на собственное усмотрение.

*Что бы определить понадобятся ли вам Latin-1 Supplement, Latin Extended-A ит.д., перейдите на http://jrgraphix.net/r/Unicode. Нажимая там на каждую из категорий вы увидите, какие символы туда входят.

В строку …and also these single characters введите персонализированные символы в нижнем и верхнем регистрах. Напимер: йцукенЙЦУКЕН

• Все следующие опции вы можете пропустить. Настройки по умолчанию рекомендованы.
• Условия: вы должны согласиться с условиями выбрав соответствующий указатель. Потом нажмите кнопку “Lets do this!”.

4. Сохраните сгенерированный .js файл в папке “js” на вашем сайте (если вы работаете локально) или на рабочий стол и загрузите на сервер.

5. Если вы подключили спецмальные символы к уже существующему шрифту, то после использования Cufon генератора вам потребуется просто заменить существующий .jscufon файл в папке “js” на свежесгенерированный. В таком случае оба файла должны иметь одинаковые имена. При замене файла вам потребуется подтвердить это в специальном окне. После замены процедура завершена.

Если вы сгенерировали другой шрифт cufon, и хотите заменить существующий на него, то выполните следующие действия:

6. Скопируйте имя сгенерированного .js файла (нажмите F2, а потом Ctrt + C)

7. Откройте файл index.php или index.html (в зависимости от типа вашего шаблона) в текстовом редакторе или Dreamweaver и найдите имя файла шрифта, который вы хотите заменить (смотрите Шаг 1 этой инструкции, если хотите узнать имя) с помощью комбинацмм Ctrl(Command) + F. Вы должны увидеть

<script src=”js/font_name.font.js” type=text/javascript></script>

и заменить имя font_ на имя сгенерированного .js файла (Шаг 6). Потом сохраните изменения.

8. Откройте ваш сгенерированный .js файл и скопируйте его font-family где указано

  font-family:font  family name

9. Откройте файл cufon-replace.js в папке “js” вашего шаблона и замените название font-family старого шрифта на новое значение.

10. Откройте ваш сайт в браузере и убедитесь, что шрифт изменился. Возможно, вам потребуется очистить кеш.

Для более детальной информации смотрите видео

Как работать со шрифтами генерированными Cufon