Встраивание шрифтов с помощью CSS

Встраивание шрифтов с помощью CSS

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

Успешными были уже первые попытки sIFR (http://wiki. novemberborn. net/sifr3/) — технологии, использующей CSS/Flash/ JavaScript и позволяющей встраивать шрифты, заменяя гипертекст на странице. А совсем недавно появилась технология Cufón (http://wiki.github.com/sorccu/cufon/about), которая переводит шрифты в специальный формат, а отрисовка производится с помощью JavaScript.

Однако вполне возможно, что будущее типографики в Сети находится в руках @font-face.

Впервые появившаяся в CSS2, исчезнувшая в CSS2.1 и снова добавленная в CSS3, директива @font-face позволяет встраивать файлы шрифтов с помощью CSS-объявлений.

Проще всего объяснить это на примере. И, кстати, эту идею легко реализовать.

Добавление @font-face в шаблон Tugboat

К примеру, представим, что в шаблоне Tugboat вместо Lucida Grande и Georgia мы хотим использовать Archer — приятный геометрический шрифт с засечками, созданный Хофлером и Фрер-Джонсом (http://typography.com/fonts/font_overview.php? productLineID=100033

Сначала напишем объявление, в котором зададим имя шрифта и исходный файл с помощью директивы @font-face.

@font-face {
font-family: "Archer Medium";
src: url(fonts/Archer-Medium. otf) format
("opentype");
}

Этот код делает две вещи:

1. создает имя шрифта (любое на ваш выбор), в данном случае — «Archer Medium»;

2. сопоставляет этому имени прямую ссылку непосредственно на файл шрифта (в данном случае — файл в формате OpenType, находящийся в каталоге /css/fonts).

Теперь, когда этот встроенный шрифт задан, использовать название семейства шрифтов Archer Medium в CSS мы можем везде, где мы бы использовали обычные названия шрифтов — например в элементе .

body {
font-family: "Archer Medium", "Lucida Grande",
"Lucida Sans Unicode", "Lucida Sans",
Helvetica, Arial, sans-serif;
color: #51463d;
font-size: 62.5%;
background: #f3f2e8;
}

Готово! Подобным образом реализованы шрифты на сайте системы дистанционного обучения. Теперь везде используется шрифт Archer Medium. Никаких скриптов, полностью масштабируемый текст, который можно выделять курсором мыши. Правда, есть две маленькие проблемы: специфический формат IE и вопрос о лицензировании шрифтов.