Часто при создании сайта встает вопрос типографики, а именно - выбор шрифта. Не секрет, что шрифтов в интернете для создания сайтов можно найти многие тысячи и на любой вкус. Среди них даже есть немало бесплатных (хотя, кого это волнует в нашей стране :-)
Да вот только толку от этого изобилия мало - то что хорошо выглядит в ОупенОфисе будет выглядеть очень серо и стандартно в браузере - они не понимают вашего рвения красиво оформить страничку. Чаще всего из такой ситуации выходят атакой »в лоб« - в графическом редакторе прорисовывают нужный текст нужным шрифтом и потом выкладываю на сайт данное творение. Всё бы ничего, но данный метод подходит для оформления меню сайта, баннеров, ещё каких элементов. Но что, если нужно оформить всю страницу разрабатываемого сайта в желаемом шрифте?
Давайте рассмотрим универсальный метод подключения своего шрифта к странице при создании сайтов. Мы будем использовать стандартный шрифт от операционной системы Ubuntu, поскольку он красив, бесплатен и пропагандирует мою родную операционную систему ;-P (Кстати, скачать этот шрифт можно отсюда -> http://packages.ubuntu.com/search?keywords=ttf-ubuntu-font-family)
Итак, приступим. У нас имеется шрифт в формате ttf (чаще всего он так распрастраняется, не будем упрощать себе задачу наличием разных форматов.)
Всё гениальное - просто. :-)) Прописываем в начале .css создаваемого сайта следующий код:
@font-face {
font-family: 'ubuntu';
src: url('/site/fonts/ubuntu.eot');
src: local('☺'), url('/site/fonts/ubuntu.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.ubuntu32 {font:32px ubuntu,arial;color:#aa0000;}
.ubuntu26 {font:26px ubuntu,arial;color:#aa0000;}
.ubuntu18 {font:18px ubuntu,arial;color:#aa0000;}
Тогда html-код может иметь вид:
<h1 class="ubuntu32">Создание сайтов, создание сайтов в днепропетровске</h1> <h2 class="ubuntu26">Создание сайтов, создание сайтов в днепропетровске</h2> <h3 class="ubuntu18">Создание сайтов, создание сайтов в днепропетровске</h4>
Казалось бы всё. Но взгляните внимательнее на 3-ю строчку сверху... А что это за формат-то такой, EOT, а? А это то, что браузеры наши дорогие очень любят ненавидить друг друга и ставить палки в колеса друг-другу. Поэтому, те шрифты, что поддерживаются одними браузерами, не поддерживаются другими. Но нам-то таких ситуаций не нужно, ведь правда? Итак, чтобы правильно создать сайт, причем создать сайт универсальный (мультибрузерный), мы включаем поддержку сразу нескольких шрифтов на сайте, а уж нужный браузер выберет то, что ему роднее. Вообще-то, есть ещё пара-тройка форматов (woff,svg (да-да, векторную графику тоже используют под шрифт), otf), но мы ведь не извращенцы - нам вполне хватит и этих. Дело за малым. Идем на какой-нибудь сайт-конвертер (поищите в Яндексе, лично мне нравится ttf2eot.sebastiankippe.com и www.kirsle.net).
Всё. Сохраняем .ttf-шрифт и вновь полученный .eot в соответствующие каталоги (см. выше css-файл). Смотрим, что получилось: