шрифты

Шрифт на странице, font-face, sIFR, Cufon

У нас всегда есть ограничения, которые налагает присутствие гарнитур на разных операционных системах. Кроме этого есть экзотические шрифты, которых точно нет ни на одной операционной системе. И вдруг мне захотелось использовать такой шрифт у себя на странице. Что делать? Картинку, которую портом надо будет постоянно менять? Это неудобно.

В связи с этим, компания Microsoft начала разработку директивы font-face. Microsoft с учетом того, что производители шрифтов требуют отчислений за свою продукцию (т.е. здесь поднимается вопрос о соблюдении авторских прав), предложила кодировать стандартные шрифты (TrueType, OpenType) в специальный формат EOT (Embedded OpenType). Сконвертированный таким образом шрифт привязывается к какому-то доменному имени, и разрешено использовать любой операционной среде этот шрифт только, если документ загружается с этого ресурса. Таким образом предполагалось сохранять права производителей этих шрифтов и заставлять людей покупать эту продукцию. НО! Такое предложенное решение было отложено. И производители браузеров не обратили особого внимания на это решение.

В CSS 2.0 появилась специальная директива font-face, которая позволяла указать таким образом сконвертированный шрифт, и задать имя этой гарнитуре, чтобы впоследствии использовать ее на странице.

Однако в CSS 2.1 такая директива исчезла.

Но проблема использования разных шрифтов на страницах со временем достаточно серьезно созрела. И производители браузеров стали предлагать свое решение. Некоторые браузеры позволяют использовать директиву font-face для любых шрифтов, даже в формате OpenType и TrueType, т.е. шрифты, которые вы у себя используетет в операционной системе, можно с помощью этой директивы включать. Что нарушает авторские права производителей шрифтов.

Некоторые производители (Mozilla) предложили использовать для передачи шрифтов специальный формат woff. Этот формат решает вопрос только технический вопрос, который относится к весу ваших шрифтов. Т.е. его задача — сделать максимальную компрессию файла, т.к. шрифты сами по себе весят достаточно много (за 100kb, некоторые — за 20mb). Грузить такие шрифты проблемно. Но вопрос с авторскими правами остался нерешенным.

Поэтому сегодня есть специальная группа, которая работает в этом направлении. О ее работе можно почитать в разделе CSS 3.0 fonts-module на странице разработчика (www.w3.org).

Люди, занятые проблемой шрифтов, ведут ресурс Font Squirrel (www.fontsquirrel.com). Здесь можно, имея на руках шрифт OpenType или TrueType, получить все версии этого шрифта уже сконвертированные так, как нужно. Заходим на закладку «@font-face Generator». Добавляем на сайт шрифт со своего компьютера, который я хочу использовать. Получим архив, в нем — конвертации нашего шрифта. Откроем файл stylesheet.css:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 26, 2012 */
@font-face {
    font-family: 'arialregular';
    src: url('arial-webfont.eot');
    src: url('arial-webfont.eot?#iefix') format('embedded-opentype'),
         url('arial-webfont.woff') format('woff'),
         url('arial-webfont.ttf') format('truetype'),
         url('arial-webfont.svg#arialregular') format('svg');
    font-weight: normal;
    font-style: normal;

Вначале с помощью правила font-family я определяю название моей гарнитуры (это ваше название, которое вы будете использовать в дальнейшем). Далее правило src позволяет определить, откуда этот файл будет загружаться. Далее идет определение локального шрифта, здесь пишется название гарнитуры (arial-webfont.eot). Далее указываются адреса тех шрифтов, которые будут использоваться, если не найден локальный шрифт.

Т.е. теперь после определения директивы font-face у вас есть название гарнитуры шрифта, которое можно использовать в других местах. Как это сделать?

body {font-family:Helvetica, Arial, sans-serif; color#333;}
.arial{
   font-weight: normal;
   font-style: normal;
   line-height: normal;
   <strong>font-family: 'arialregular'</strong>, sans-serif;}

Когда мы используем такой тип подключения, по факту загружаются все форматы шрифта (woff, ttf, svg), т.е. проблема трафика, если у нас шрифты большие по размеру.

Другие способы подключения шрифтов

  • Использование технологии flash, чтобы отображать ваши символы с помощью шрифта, внедренного внутрь flash. Для этого используется специальная флешка-пустышка, в которую сохраняется шрифт. Технология называется sIFR (Scalable Inman Flash Replacement). Для работы нужна программа, которая умеет редактировать flash. Вы внедряете в flash-пустышку тот файл, который вам нужен. И теперь, когда страница загружается, если вы указали какому-то элементу с помощью java-script замену на какое-то семейство, на эту гарнитуру, то java-script определяет размеры, встраивает туда элемент flash (простой прямоугольник), и в этот прямоугольник передает тот текст, который в этом элементе стоял. В результате вместо обычного текста на странице вы видите flash, который и образует то, что вы хотите увидеть.
  • Технология cufon — использование фоновых картинок с помощью кодирования на сервере. Есть на сервере скрипт, который может обращаться к шрифту, который вы хотите использовать. У вас на странице стоит какой-то элемент, для которого вы хотите использовать такой шрифт. Вы средствами java-script посылаете фоновый запрос к серверу, который содержит текст этого элемента и тот самый шрифт, который вы хотите использовать. На сервере происходит кодирование этого шрифта в картинку. И картинка назад передается закодированная либо в base64, либо как svg. И браузер кладет фоном в этот элемент эту картинку. Т.е. по факту вместо шрифта вы видите заместитель, т.е. какой-то элемент, в котором есть фоновая картинка, закодированная с помощью серверного скрипта.

Для работы технологии cufon нужно использовать то, что на сервере будет кодировать картинку (например, php скрипт), и сам java скрипт, который умеет отправлять запрос на сервер.

Эти последние два решения со временем устаревают, используются все реже и реже. На смену приходит директива font-face.




Добавить комментарий

Ваш e-mail не будет опубликован.