Как использовать любой шрифт на сайте
Всем привет!
Сегодня у нас небольшая подборка решений, которые помогут вам использовать любой (ну почти ;-) шрифт на своем сайте. Среди рассмотренных решений будут скрипты, которые используют только JS, JS+Flash и JS+PHP.
Все эти решения работают во всех современных браузерах, при условии, что включен JS и, если надо, есть флеш плагин.
Typeface.js
Решение на чистом JS, без использования флеша. Скрипт использует для работы SVG и VML. Давайте посмотрим, как это все работает.
Для начала, идем на страницы загрузки и качаем саму библиотеку. Далее нам нужен будет специальный файл со шрифтом. Для этого выбираем нужный нам ТруТайп шрифт и конвертируем его. Подключаем к странице вот так:
<html>
<head>
<title>Тестируем typeface.js</title>
<!-- сначала грузим любые внешние файлы стилей -->
<link rel="stylesheet" type="text/css" ref="/style.css">
<!-- потом грузим библиотеку и файлы шрифтов -->
<script type="text/javascript" src="typeface-0.10.js"></script>
<script type="text/javascript" src="helvetiker_regular.typeface.js"></script>
</head>
<body>
<!-- А тут уже можно добавить стилей к шрифту с помощью CSS -->
<div class="myclass typeface-js" style="font-family: Helvetiker">
Немного пробного текста, чтобы посмотреть что и как...
</div>
</body>
</html>Вы также можете посмотреть примеры или почитать подробнее об особенностях установки на сайте проекта. Довольно удобная качественная вещь.
Cufon
Еще одно решение, тоже на js + SVG/VML. Собственно, принцип работы и порядок действий такой же, как у typeface.js. Как плюс можно отметить, что есть поддержка не только .TTF, но и .OTF шрифтов.
Идем на сайт проекта, качаем библиотеку и генерируем файл шрифта (ух, как много полей). Теперь имплементим на сайт.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Библиотеке -->
<script src="cufon-yui.js" type="text/javascript"></script>
<!-- Файл шрифта -->
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>
<!-- Указываем, к чему применить шрифт (в данном случае ко всем заголовкам h1) -->
<script type="text/javascript">
Cufon.replace('h1');
</script>
</head>
<body>
<h1>Пример заголовка первого уровня</h1>
</body>
</html>Опять же, советую почитать про особенности установки более подробно.
sIFR
Сифру, помимо js, для работы необходим флеш плагин в браузере. Кроме того, чтобы сделать файл шрифта для Сифра, вам понадобиться редактор Флеша (например, Адоб Флеш КС4) или желание овладеть экспериментальной техникой без редактора ;-)
В общем и целом, исходя из описания установки, могу сказать, что процесс не такой простой, как у Фонтфейса и и Куфона.
FLIR
Эта штука заменяет указанные вами части текста... картинками. Вот такое, с одной стороны, оригинальное, а с другой, привычное решение.
Для работы необходимо иметь PHP (желательно пятый) и GD на сервере. На сервере-то как раз и будут происходить все операции со шрифтами. На клиенте же нужно только задать правила, как и что заменять.
Думаю, что при грамотном использовании, эти скрипты смогут помочь вам делать сайты более интересными, удобными и красивыми. Только не переусердствуйте с заменой шрифтов.
P.S. Возможно вы заметили, что наш блог преодолел очередную планку — количество подписчиков недавно превысило тысячу человек, а средняя посещаемость перевалила полторы тысячи посетителей в день. Мы растем ;-)
Понравилась статья?
Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.
Комментарии — 14
RSSпервый сайт не открывается сейчас...
Можете подробней рассказать?
http://prootime.ru/to-use-any-font-in-your-site
скажите, что я сделал не так