TypeFace.js

Каждому, кто работает с версткой, наверно приходилось сталкиваться с творческими выкидышами дизайнеров с полудюжиной нестандартных шрифтов. Да, можно сделать текст картинкой, но это не то, что хочется. Благо сейчас есть маленькие хитрости в виде javascript-библиотек для отрисовки нестандартных шрифтов.
Одну из них я и решил освоить, а параллельно и отпрактиковаться на верстке одного небольшого (но отнюдь не простого) макета.
Речь пойдет о TypeFace.js. Для начала качаем саму библиотеку. Далее идем на страницу fonts.html и загружаем на сервер файл с требуемым шрифтом. На выходе мы получаем js-файл с нашим шрифтом. Как теперь этим воспользоваться:

<head>
	<script type="text/javascript" src="typeface-0.15.js"></script>
	<script type="text/javascript" src="%FONT_NAME%.typeface.js"></script>
</head>
<body>
	<h1 style="font-family: %FONT_NAME%">Заголовок</h1>
</body>

Вот и все. Ничего сложного. Да, вот тот макет, на котором я тренировался:
макет
А вот, что у меня получилось сверстать — посмотреть.


4 комментария
  1. beque сказал(а):

    hi!!!

  2. Юлия сказал(а):

    Здорово, что придумывают для дизайнеров такие вот возможности, но как всегда есть одно но.. У меня вот ваш пример отображается иначе, чем вы предоставили его на картинке, и нет никаких супер шрифтов на сайте. Я сама столкнулась с такой проблемой и пока не знаю как ее решить.

    У меня на моем компе установлены нестандартные шрифты, которые я использую на своем сайте. Подключаю по инструкции js-файлы, класс, прописываю в стилях имя шрифта. Все отображается так, как мне надо в любом браузере. Но решила проверить на левом компе, и все поплыло из-за того, что подключенный шрифт не отображается и он заменился на стандартный браузеровский шрифт. Может быть кто сталкивался с этим и знает решение данной проблемы?

  3. KronuS сказал(а):

    Юлия, эту заметку я писал почти 4 года назад. Ее актуальность я сейчас не гарантирую.

  4. Юлия сказал(а):

    Да я все понимаю, что уже не мало времени прошло, но у меня вот появилась такая проблема, и я подумала, что возможно вы с ней сталкивались и решили 🙂 Спасибо за ответ!
    Если кому-то поможет, то я выкрутилась тем, что использовала гугл шрифты (http://www.google.com/fonts/), и для кроссбраузерности еще использовала шрифты (.ttf, .eot, .otf), подключенные через @font-face, чтобы в ишаке 7,8 и старой опере отображалось корректно.

Оставить комментарий

Top ↑ | Main page | Back