Уговорили-таки меня написать пост о том, как я сделал такие заголовки постов. Очень многие думают, что это картинка, нет - это не картинка, это сторонний сглаженный шрифт. Я его поставил, потому-что ненавижу лесенки в заголовках, как это происходит в стандартных шрифтах. Поставил я его с помощью сервиса Cufon. О нем сейчас и расскажу. Cufon – сервис который состоит из двух частей - генератор шрифта, движок рендеринга на Javascript. Конечно-же есть много замен этому сервису, но cufon самый кроссбраузерный, быстрый и легкий в настройке, именно поэтому я его и выбрал. (Есть еще альтернатива - @font-face, но , к сожалению, этот параметр поддерживают не все браузеры)
Приступим к работе:
1. Выберем любой нужный нам шрифт, в моем случае - это Tahoma Bold. (Я знаю что он стандартный, я добивался сглаживание шрифта, нежели его внешний вид.)
2. Теперь нам нужно с генерировать, из нашего шрифта, javascript файл. Идем на cufon.shoqolate.com/generate/, вставляем в форму наш шрифт, далее, по желанию выбираем настройки, получаем файл, в моем случае это был TahomaBold_400-TahomaBold_700.font.js.
3. Скачиваем: полученный файл и дистрибутив Cufon'a - cufon.shoqolate.com/js/cufon-yui.js.
4. Подключаем оба файла на наш сайт. Как обычный js документ:
Code
<script type="text/javascript" src="/js/cufon-yui.js">
<script type="text/javascript" src="./js/Rockwell_400-Rockwell_700.font.js">
5. Выберем, для каких именно элементов страницы мы хотим применять наш новый шрифт. Я применил для тега H1.
Code
<script type="text/javascript">
Cufon.replace("h1");
</script>
Ну вот и готово! Цвет, размер и прочие параметры будут браться из стилей или файла CSS. Что-бы шрифт применялся на несколько тегов, то просто подписываем к h1 через запятую нужные нам теги, к примеру:
Code
<script type="text/javascript">
Cufon.replace("h1, span");
</script>
Источник
