Как сделать, чтобы скрипт cufon поддерживал кириллицу

Как сделать, чтобы скрипт cufon поддерживал кириллицу | n-wp.ru
👍 Научим бесплатно правильно создавать сайты на WordPress. Подробнее →

Сейчас в интернете стали популярны темы, использующие скрипт cufon. Для чего нужен этот скрипт? Если вы попробуете увеличить размер шрифта в теме (например, в заголовке поста), то он с определенными шрифтами (можно сказать, что почти со всеми), будет выглядеть угловато. Хоть в браузерах и используется сглаживание, все же до конца сделать обводы букв плавными, начиная с определенного размера, не получится. Java-скрипт cufon сделан для того, чтобы текст большого размера выглядел красиво, с плавными обводами, без угловатых переходов и резких углов. Текст, обработанный этим скриптом, выглядит выигрышно красиво, элегантно, каким бы большим он не был. Однако вот незадача — в большинстве тем этот скрипт не понимает кириллический текст, вовсе его не отображая, как будто его и не было. Как же исправить это? Немного покопавшись, я решил эту проблему.

Проблема решается формированием нового js-скрипта с внедренным шрифтом, поддерживающим кириллицу. Звучит страшно, но на самом деле совсем легко. Опишу самый простой способ решения проблемы с поддержкой кириллицы скриптом cufon.

Создание файла js

1. Подготовьте шрифты, которые вы хотите внедрить в скрипт cufon, скопировав их в отдельную папку. Обязательно убедитесь, что эти шрифты поддерживают кириллицу.

Как сделать, чтобы скрипт cufon поддерживал кириллицу

2. Зайдите на страницу для создания скрипта: http://cufon.shoqolate.com/generate/

Как сделать, чтобы скрипт cufon поддерживал кириллицу

3. Укажите шрифты, которые хотите внедрить. Нужно указать четыре шрифта — обычный, жирный, наклонный и наклонный-жирный. Лучше использовать разновидность одного и того же шрифта, чтобы текст не слишком разительно отличался. В качестве испытуемого я выбрал замечательный шрифт Calibri, и его наклонно-толстые разновидности. Не забудьте указать, что этот шрифт можно использовать на страницах (он бесплатный).

Как сделать, чтобы скрипт cufon поддерживал кириллицу

4. Отметьте все варианты использования символов этого шрифта (см. скриншот ниже).

Как сделать, чтобы скрипт cufon поддерживал кириллицу

5. Отметьте возможные варианты масштабирования шрифтов скриптом (см. скришот ниже).

Как сделать, чтобы скрипт cufon поддерживал кириллицу

6. Создайте и скачайте скрипт cufon внедренным вашим шрифтом.

Как сделать, чтобы скрипт cufon поддерживал кириллицу

Использование файла js

Скачивается файл с примерно таким названием — Calibri_400-Calibri_700-Calibri_italic_400-Calibri_italic_700.font.js — это как раз то, что нам нужно. Теперь осталось использовать этот скрипт. Сделать это можно двумя способами — легким и сложным:

  1. подменить скрипт в теме нашим новым скриптом
  2. вставить в тему новый скрипт и определить, какие заголовки нужно им обрабатывать

Первый способ — самый легкий. Так как в теме уже используется скрипт cufon, то его нужно просто найти, и заменить нашим. Найдите в теме папку соскриптами, и среди них найдите скрипт cufon. Его название будет примерно таким: cufon-yui.js. Запомните его. Переименуйте ваш файл Calibri_400-Calibri_700-Calibri_italic_400-Calibri_italic_700.font.js в  cufon-yui.js и перепишите го поверх старого. Вот и все, мы схитрили — заменили встроенный в тему скрипт новым, поддерживающим кириллицу.

Второй способ сложнее. Нужно вставить в файле header.php найти, где подключается скрипт cufon, и добавить к нему наш скрипт, вставив его до закрытия тега head:

<script src="/js/cufon-yui.js" type="text/javascript">
<script src="/js/Calibri_400-Calibri_700-Calibri_italic_400-Calibri_italic_700.font.js" type="text/javascript">

Cufon.replace('h1, h2, h3', { fontFamily: 'Calibri' });

Обратите внимание на h1, h2, h3 — это те заголовки, которые будет обрабатывать скрипт.

Конечно же, первый способ намного проще.

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. LazurAnt

    Я на своей локалке использую тему где данный скрипт (или похожий на него) уже присуствует как встроенная функция. И при этом корректно изображает кириллицу.

    Ответить
    1. Вы наверное используете изначально переведенную тему, или же в скрипте используется шрифт, поддерживающий кириллицу.

      Ответить
      1. LazurAnt

        Скорее всего так и есть. Хотя это вариант я тоже опробую на всякий случай.

        Ответить
  2. Сергей

    Надо попробовать, а то на моей теме заголовки на кириллице не отображались, пришлось отключить cufon.

    Ответить
  3. Рысик

    God save the Admin!

    Ответить
  4. TgFg

    А сколько должен весить файл? У меня 6мб скачалось и продолжает качаться дальше O_o

    Ответить
    1. TgFg

      Слишком много галочек поставил :) Теперь файл весит метр. Что тоже дико много :(

      Ответить
      1. Посмотрите пункт 4 в посте — в нем есть подсказки. Вам действительно нужны все варианты? Наверное стоит убрать ненужные, чтобы облегчить итоговый файл.

        Ответить
        1. TgFg

          Я проставил галочки как в пункте 4, использовал Calibri В итоге файл чуть больше метра

          Ответить