Как использовать Свой шрифт на сайте

Сегодня у нас небольшая подборка решений, которые помогут вам использовать свой — любой (ну почти 😉 шрифт на своем сайте. Среди рассмотренных решений будут скрипты, которые используют только JS,  JS+Flash и JS+PHP.

Все эти решения работают во всех современных браузерах, при условии, что включен JS и, если надо, есть флеш плагин.

Typeface.js

Решение на чистом JS, без использования флеша. Скрипт использует для работы SVG и VML. Давайте посмотрим, как это все работает.

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

<code class=" html"><span class="tag">&lt;<span class="keyword">html</span>&gt;</span>
<span class="tag">&lt;<span class="keyword">head</span>&gt;</span>
<span class="tag">&lt;<span class="keyword">title</span>&gt;</span>Тестируем typeface.js<span class="tag">&lt;/<span class="keyword">title</span>&gt;</span>
<span class="comment">&lt;!-- сначала грузим любые внешние файлы стилей --&gt;</span>
<span class="tag">&lt;<span class="keyword">link</span><span class="attribute"> rel=<span class="value">"stylesheet"</span></span><span class="attribute"> type=<span class="value">"text/css"</span></span><span class="attribute"> ref=<span class="value">"/style.css"</span></span>&gt;</span>

<span class="comment">&lt;!-- потом грузим библиотеку и файлы шрифтов --&gt;</span>
<span class="tag">&lt;<span class="keyword">script</span><span class="attribute"> type=<span class="value">"text/javascript"</span></span><span class="attribute"> src=<span class="value">"typeface-0.10.js"</span></span>&gt;</span><span class="tag">&lt;/<span class="keyword">script</span>&gt;</span>
<span class="tag">&lt;<span class="keyword">script</span><span class="attribute"> type=<span class="value">"text/javascript"</span></span><span class="attribute"> src=<span class="value">"helvetiker_regular.typeface.js"</span></span>&gt;</span><span class="tag">&lt;/<span class="keyword">script</span>&gt;</span>
<span class="tag">&lt;/<span class="keyword">head</span>&gt;</span>
<span class="tag">&lt;<span class="keyword">body</span>&gt;</span>
<span class="comment">&lt;!-- А тут уже можно добавить стилей к шрифту с помощью CSS --&gt;</span>
<span class="tag">&lt;<span class="keyword">div</span><span class="attribute"> class=<span class="value">"myclass typeface-js"</span></span><span class="attribute"> style=<span class="value">"font-family: Helvetiker"</span></span>&gt;</span>
Немного пробного текста, чтобы посмотреть что и как...
<span class="tag">&lt;/<span class="keyword">div</span>&gt;</span>
<span class="tag">&lt;/<span class="keyword">body</span>&gt;</span>
<span class="tag">&lt;/<span class="keyword">html</span>&gt;</span></code>

Вы также можете посмотреть примеры или почитать подробнее об особенностях установки на сайте проекта. Довольно удобная качественная вещь.

Cufon

Еще одно решение, тоже на js + SVG/VML. Собственно, принцип работы и порядок действий такой же, как у typeface.js. Как плюс можно отметить, что есть поддержка не только .TTF, но и .OTF шрифтов.

Идем на сайт проекта, качаем библиотеку и генерируем файл шрифта (ух, как много полей). Теперь имплементим на сайт.

<code class=" html"><span class="doctype">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;</span>
<span class="tag">&lt;<span class="keyword">html</span>&gt;</span>
<span class="tag">&lt;<span class="keyword">head</span>&gt;</span>
<span class="tag">&lt;<span class="keyword">meta</span><span class="attribute"> http-equiv=<span class="value">"Content-Type"</span></span><span class="attribute"> content=<span class="value">"text/html; charset=utf-8"</span></span>&gt;</span>
<span class="comment">&lt;!-- Библиотеке --&gt;</span>
<span class="tag">&lt;<span class="keyword">script</span><span class="attribute"> src=<span class="value">"cufon-yui.js"</span></span><span class="attribute"> type=<span class="value">"text/javascript"</span></span>&gt;</span><span class="tag">&lt;/<span class="keyword">script</span>&gt;</span>

<span class="comment">&lt;!-- Файл шрифта --&gt;</span>
<span class="tag">&lt;<span class="keyword">script</span><span class="attribute"> src=<span class="value">"Frutiger_LT_Std_400.font.js"</span></span><span class="attribute"> type=<span class="value">"text/javascript"</span></span>&gt;</span><span class="tag">&lt;/<span class="keyword">script</span>&gt;</span>
<span class="comment">&lt;!-- Указываем, к чему применить шрифт (в данном случае ко всем заголовкам h1) --&gt;</span>
<span class="tag">&lt;<span class="keyword">script</span><span class="attribute"> type=<span class="value">"text/javascript"</span></span>&gt;</span><span class="javascript">
Cufon.replace(<span class="string">'h1'</span>);
</span><span class="tag">&lt;/<span class="keyword">script</span>&gt;</span>
<span class="tag">&lt;/<span class="keyword">head</span>&gt;</span>
<span class="tag">&lt;<span class="keyword">body</span>&gt;</span>
<span class="tag">&lt;<span class="keyword">h1</span>&gt;</span>Пример заголовка первого уровня<span class="tag">&lt;/<span class="keyword">h1</span>&gt;</span>
<span class="tag">&lt;/<span class="keyword">body</span>&gt;</span>
<span class="tag">&lt;/<span class="keyword">html</span>&gt;</span></code>

Опять же, советую почитать про особенности установки более подробно.

sIFR

Сифру, помимо js, для работы необходим флеш плагин в браузере. Кроме того, чтобы сделать файл шрифта для Сифра, вам понадобиться редактор Флеша (например, Адоб Флеш КС4) или желание овладеть экспериментальной техникой без редактора 😉

В общем и целом, исходя из описания установки, могу сказать, что процесс не такой простой, как у Фонтфейса и и Куфона.

FLIR

Эта штука заменяет указанные вами части текста... картинками. Вот такое, с одной стороны, оригинальное, а с другой, привычное решение.

Для работы необходимо иметь PHP (желательно пятый) и GD на сервере. На сервере-то как раз и будут происходить все операции со шрифтами. На клиенте же нужно только задать правила, как и что заменять.

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

Спонсор поста World Programs — Сайты для бизнеса

Запись навигация

Top