Cufon — быстрая замена шрифта.
апреля 22, 2010
TRka20
В нашем блоге уже не раз «всплывали» темы, в которые включены js (Ява скрипты). Но не будем говорить о всех, а рассмотрим один: тот скрипт, что позволяет менять шрифт за считанные доли секунды. Называется это чудо «Cufn». Начало было положено в 2008 году, автором скрипта является Simo Kinnunen.
Зачем он нужен?
Для замены вашего шрифта на ваш проивзольный. С помощью него вы можете заменить заголовки на нужный (при желании можно заменить и весь текст, но с точки зрения оптимизации сайтов будет не самым лучшим выбором.)
Что нужно для замены?
На самом деле все очень просто. Требуется два скрипта: Первый — сам Cufn.js. Второй скрипт мы должны получить с помощью генератора . Следуем на страницу генератора , чтобы конвертировать ваш шрифт в скрипт. Перед нами шесть блоков (#Выбор шрифта для конвертирования, #Включение глифоф, #Безопасность, #Производительность и размер файла, #Настройки, #Условия) , которые нам нужно заполнить\выбрать, прежде чем можно будет сохранить заветный шрифт.
#1. Выбираем шрифт для конвертирования:
Условия: Расширения файла должно быть: .ttf (TrueType); otf (OpenType); PFB (Printer Font Binary); Ставим галочку на пункте с лицензнией (как на скриншоте)
#2. Включаем глифы:
Выбираем нужные глифы. Советую выбрать так, как указано на скриншоте. А именно: (Uppercase — Заглавные. Lowercase — Строчные. Numerals — цифры. Punctuation — Пунктуация. WordPress Punctuation — Пунктуация WordPress’a. Basic Latin — Основные латинские глифы. Cyrillic Alphabet — Кириллица. Russian Alphabet — Русские глифы.) Обязательно, чтобы ваш шрифт поддерживал Кириллицу, иначе вместо замены у вас будет пустое поле.
#3 , #4. Безопасность и Производительность:
Поле ввода в блоке #Безопасности рекомендуется оставить пустым, если ваш шрифт не коммерческий, так же для охвата доменов, где не будет производиться замена текста. Опускаемся ниже, ставим галочку на «No thanks, use the font’s own value» (Нет, спасибо, выберу собственные значения шрифта). Убираем галочку с «Allow path optimization» (Оставьте галочку, если собираетесь менять маленькие значения шрифта (h4-h5), например). Оставляем галочку на «Include kerning tables (improves readability but slightly increases file size)» (Включить кернинг таблицы (улучшает читаемость, но немного увеличивает размер файла).
#5 , #6. Настройки и Условия:
Последний два пункта. Оставляем значение «Cufon.registerFont». Остается поставить галочку на «I acknowledge and accept these terms» (Я подтверждаю и принимаю эти условия). Бинго! Нажимаем на кнопку Let’s do this! И забираем свой заветный js с названием вашего шрифта.
# Последнее
Заменить шрифт (что касается «обычных» html макетов) можно воспользовавшись примером автора. Но наш блог посвящен WordPress, поэтому рассмотрим пример, когда необходимо заменить шрифт в теме для WP.
Стоит сохранить наши два вышеописанных .js файла в папку ‘корень папки с темой/includes’, или другой, по вашему усмотрению. Далее открываем файл «header.php». Перед закрытием тега </head> вставляем следущее:
<script src=»<?php bloginfo(‘template_url’); ?>/includes/cufon.js» type=»text/javascript»></script>
<script src=»<?php bloginfo(‘template_url’); ?>/includes/HelveticaInseratC_400.font.js» type=»text/javascript»></script>
<script type=»text/javascript»>
Cufon.replace(‘h1, h2, h3, { fontFamily: ‘HelveticaInseratC’ });
</script>
Где:
/includes/js/HelveticaInseratC_400.font.js»
— название сгенерированного шрифта, путь к нему.
Cufon.replace(‘h1, h2, h3,
— тут следуют указать скрипту, какие теги заменить.
{ fontFamily: ‘HelveticaInseratC’ });
— семейство шрифта. (Узнать его можно открыв ваш сгенерированный шрифт программой Notepad++ или Notepad).
Cемейство указано здесь:
# Полезные ссылки в тему:
Оффициальные (ENG) :
Не оффициальные, на русском (RUS):
Приятного использования, пользуйтесь с умом.
Понравилась статья? Проявил инетерес? — Подпишись на Rss.
You can leave a response, or trackback from your own site.
