—»     —»   Как достичь кросс-браузерной поддержки @font-face
  Раздел: Руководства   Комментариев: 2  

Как достичь кросс-браузерной поддержки @font-face



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

Введение

Если вы не жили в пещере последние несколько месяцев, то вы наверняка многое слышали об объявления значения @font-face в CSS-коде, что предоставляет возможность использования собственных шрифтов в ваших собственных веб-страницах. Это очень полезно и удобно, но, к сожалению, все браузеры по-разному поддерживают этот атрибут кода. Свежие версии браузеров поддерживают прямую ссылку на файлы шрифта типа truetype или opentype, но это вызывает много споров по поводу лицензирования шрифтов. К счастью, такие сервисы как Typekit, помогают разрешить дилемму с лицензионным соглашением. Если у вас есть желание получить более подробную информацию по поводу Typekit, то здесь можно ознакомиться со множеством статей от Джеффри Вэя по этому поводу, включая Nettuts+.

Internet Explorer является первым браузером с поддержкой @font-face, начиная от далекой-далекой версии 4. Этот браузер до сих пор поддерживает этот атрибут точно так же, как это было и раньше, т.е. использует запатентованный формат под названием EOT (Embedded Open Type – Встроенный открытий тип). Шрифт такого формата имеет ограничения в попытках решения проблемы с лицензионным соглашением. Например, файлы EOT могут быть привязаны к определенному домену и другие сайты не смогут ссылаться на ваши файлы шрифтов. Эти файлы даже не могут быть скачаны другими сайтами ради дальнейшего использования. В них также есть поддержка разбивки текста, или включения именно тех символов, которые вам потребуются на странице. Это может значительно уменьшить размер файла, который очень важен в процессе создания такого сайта, для правильной работы которого есть потребность в том, чтобы посетителем скачивался специальный файл. Файлы EOT можно считать решением проблемы с лицензионным соглашением, но некоторые люди очень не любят, что они содержат форму управления цифровыми правами (DRM). Были некоторые предпосылки создания специального веб-формата для шрифтов, который поддерживали бы все браузеры, и с помощью которого можно было бы решить все лицензионные проблемы, но, как и любой новый стандарт веб, потребуется очень много времени на его разработку и адаптацию к интеграции во все браузеры. Но уже сейчас, вместо ожиданий, вы можете применить @face-font и немного поработать руками и головой. Ниже приведен список форматов шрифтов, которые поддерживаются различными браузерами.

Как достичь кросс-браузерной поддержки @font-face

Этап 1: Заполучите свой шрифт

Согласно лицензионному соглашению, у вас нет возможности использовать любой шрифт, какой вы только пожелаете. Лучшим выбором для вас будет – выбрать бесплатный шрифт. Существует огромное множество отличных бесплатных шрифтов, и на многих сайтах есть списки тех шрифтов, которые вы можете использовать посредством @font-face. Мы может вам посоветовать сайт fontex.org. На сайте предоставлены все типа шрифтов, и вполне вероятно, вам не составит труда отыскать тот шрифт, который очень дополнил бы ваш дизайн.

Как достичь кросс-браузерной поддержки @font-face

Этап 2: Конвертация шрифта

Так как существуют некоторые разминки в поддержке шрифтов разными браузерами, вам понадобится использовать как минимум три разных файла шрифтов для того, чтобы добиться кросс-браузерности. Сперва вам потребуется формат TTF или OTF для Firefox 3.5 и Safari. К счастью, большая часть бесплатных шрифтов предоставляется именно в этих форматах. Далее вам потребуется формат EOT для Internet Explorer. У корпорации Microsoft есть утилита под названием WEFT. Её можно использовать для создания EOT-файлов, но она была разработана во времена Windows 98, поэтому выглядит не так уж современно. И даже есть вероятность того, что вы не сможете ее запустить на своем компьютере. Но обрадуем вас тем, что хакеры уже успели распространить в сети утилиту под названием ttf2eot. Теперь можете забыть об использовании командной строки, потому что вам не придется ей пользоваться. Существует несколько онлайн утилит, которые создают графическую оболочку для программы ttf2eot. Мы можем посоветовать вам Font Squirrel @font-face Kit Generator. Как мы видим по названию утилиты, она разработана специально для создания шрифтов для @font-face, и она также может сгенерировать другие форматы, включая EOT. Все что от вас требуется, это загрузить нужный шрифт, выбрать формат файла на выходе, и нажать кнопку «download». Папка с вашим конвертированным файлом и демонстрационной страницей скачается к вам на компьютер, как только утилита закончит конвертацию.

Как достичь кросс-браузерной поддержки @font-face

В конвертере Font Squirrel доступны некоторые опции, например, разбивка шрифта, с которой вы можете повозиться. Кроме EOT-файла для Internet Explorer, утилита может сгенерировать формат SVG (который мы обсудим позже), и WOFF-формат. WOFF представляет собой формат нового поколения для веб-шрифтов. Данный формат будет поддерживаться в Firefox версии 3.6. Можете пока не утруждать себя созданием файла данного формата, так как еще даже нет браузера, который бы его поддерживал.

Итак, давайте поговорим на счет шрифтов SVG. Вероятно, вы слышали об этом формате, как о стандарте векторной графики. Но сообщаем вам, что данный формат также может быть использован и как файл шрифта. Все браузеры, которые поддерживают SVG, поддерживают SVG-шрифты, которые находятся внутри файла данного формата. Но некоторые браузера также поддерживают SVG-шрифты в атрибуте @font-face. Мы будем использовать SVG-шрифт для поддержки его в атрибуте @font-face в браузерах Google Chrome, Safari для iPhone, и для Opera. Font Squirrel предоставляет возможность создания SVG-файлов, но они обычно выходят в два раза больше размером, нежели обычные файлы шрифтов. Если вы дружите с командной строкой, то существует еще одна утилита по созданию данного формата, которая позволяет придерживаться размера исходного файла, а иногда даже делает размер меньше. Если вы не дружите с командной строкой, то лучше просто пропустите это.

Лучшим способом разработки SVG-шрифтов можно считать утилиту с командной строкой – ttf2svg из Java SVG toolkit Batik. Вам потребуется установленная поддержка Java на локальном компьютере. У пользователей Mac эта поддержка есть по стандарту, но пользователям Windows нужно скачать и установить данную поддержку. Далее, вам потребуется скачать Batik. Внутри скачанной папки вы обнаружите файл под названием batik-ttf2svg.jar. Это и есть программа для конвертации файлов шрифтов. К сожалению, утилита дружит только с файлами формата TTF, поэтому вам придется конвертировать файл формата OTF в TTF. Вы можете использовать этот онлайн конвертер. Откройте командную строку и впишите следующее:

java -jar /path-to/batik-1.7/batik-ttf2svg.jar FontName.ttf -o FontName.svg -id font

В данной строке вам нужно указать правильный путь до файла batik-ttf2svg.jar на вашем компьютере, и заменить имя шрифта именем того шрифта, который вы используете. Последний пункт в данной команде устанавливает ID шрифта в сгенерированном SVG-файле. Позже, это будет крайне важно, поэтому оставьте значение таким, какое оно есть (font).

Этап 3: CSS

Итак, теперь нам потребуется придать всем типам шрифтов кросс-браузерную поддержку. Нам просто нужно вписать CSS для интеграции шрифтов. Опираясь на работу Пола Айриша и его пуленепробиваемый порядок @font-face, используйте данный код:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'),
         local('Comfortaa'),
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg');
}

Данный код ссылается на все форматы шрифтов, которые мы сгенерировали, чем создается поддержка кросс-браузерности. Для начала мы дадим имя нашему шрифту, чтобы потом использовать его в дальнейшем коде CSS. Далее у нас есть два значения src: одно для Internet Explorer, второй для всех остальных браузеров. Нам нужно, чтобы IE использовал файл EOT, поэтому его прописываем первым. Следующее значение src будет пропущено IE, так как там указан неверный для его стандарта порядок. Во втором значении src указывается список всех остальных форматов в той последовательности, в которой нам требуется. Первые два формата используют локальную систему проверки наличия данных шрифтов на компьютере пользователя. Если его наличие подтверждено, то он не будет скачиваться из интернета. А два значения потому, что браузер Safari поддерживает только лишь имена шрифтов из комментариев. Поэтому, если имя комментария отлично от основного имени, вам следует вписать их оба. Далее следует формат TTF, или он же truetype. Если вы используете OTF, то вам нужно вписать его сюда. Данные типы шрифтов будут использоваться в Opera 10, Safari, и Firefox 3.5. Мы поместили их перед назначением SVG-шрифта ради сохранения скорости работы браузера Safari, который поддерживает как TTF, так и SVG. И последним мы определим формат SVG, который будет читаться Goggle Chrome, Opera 9, и в iPhone. Вы должны заметить, что в ссылке до SVG-файла используется знак «#», в виде #font. Это связывает его с тем ID, который мы использовали при генерации SVG-шрифта. Если вы проследовали по инструкции с использованием командной строки, то у вас будет указан данный ID. Если же вы сгенерировали SVG-файл в программе Font Squirrel, то ID шрифта будет имя комментария в файле шрифта (второе определение local() ). Это потому, что вы можете применять несколько разных шрифтов с одного SVG-файла, и вам требуется указать, какой конкретно вы хотите использовать.

Для того, чтобы использовать тот шрифт, который вы только что указали в CSS, вам просто нужно указать его как обычный шрифт. Имя шрифта, которое вы укажете, соответствует имени шрифта в font-family, которые вы указали в вашем @font-face. И всегда помните о том, чтобы позаботиться о запасном веб-шрифте, на случай, если попадется посетитель, который использует совсем древние браузеры. Иначе он будет наблюдать стандартный шрифт браузера. Пример:

h1, p {
    font-family: 'Comfortaa Regular', Helvetica, Arial, sans-serif;
}

Проверяем внешний вид

Отлично! Теперь у вас есть шрифт, который работает во всех браузерах! Теперь давайте проверим, как это выглядит? Это также зависит и от ОС, которую вы используете. В Mac OS X шрифты будут смотреться замечательно. В стареньких версиях Windows, как бы то ни было, они будут казаться очень уж привлекательными. Это потому, что рендеринг шрифтов от Microsoft ранее не поддерживал сглаживание экранных шрифтов. В свежих версиях Windows (Vista, XP) есть поддержка ClearType, что подразумевает под собой сглаживание экранных шрифтов. В общем, вы как дизайнер, должны четко решить, где вам использовать нестандартные шрифты на странице, опираясь на возможные проблемы, с которыми могут встретиться пользователи результата вашей работы. Смеем заявить, что нестандартные шрифты хорошо выглядят при маленьких размерах. При больших размерах (которые обычно используются для заголовков страниц), нестандартные шрифты могут испортить общий вид дизайна. Чем изворотливее шрифт – тем более лестничных закруглений он может сотворить. Если большая часть посетителей вашего ресурса используют IE, то для заголовков вам лучше использовать шрифта типа Cufon, а @font-face применить для маленького страничного текста. Некоторые шрифты могут хорошо смотреться даже при больших размерах – в зависимости от шрифта. Не забудьте протестировать собственный веб-сайт на стареньких версиях Windows перед тем, как запускать проект в ход. Если вам потребуется использовать Cufon, то есть одна отличная статья по применению на Nettuts, а ещё одна (на русском языке) находится здесь.

Как достичь кросс-браузерной поддержки @font-face

Заключение

Надеемся, что наша статья привнесла в ваше сознание хоть какую-то новую и полезную информацию по поводу внедрения на страницы сайта собственных нестандартных шрифтов! Ждем ваших вопросов в комментариях, если они возникнут, конечно!

Скачать архив с материалом:
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: шрифты
Опубликовал Mysterious Master   Прочитано (раз): 17021   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 23 декабря 2010 @ 17:15
Написал: Stepovoysg — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте
очень полезная стать, только не совсем то что мне нужно:
у меня не выделяется обычный текст именно в футере

выделить можно только ОПЕРОЙ
я уже замучился решать эту задачку :(
помогите

ЗЫ заранее благодарен
Комментарий #2: 28 января 2012 @ 23:18
Написал: Hripsime — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Огромная благодарность вам.
Это спасение.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2019    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
30