войти зарегистрироваться

Каскадные Таблицы Стилей whois

индекс
230,41

Прекрасные шрифты посредством @font-face

Хотя Firefox 3.0 улучшил отображение шрифтов, привнеся поддержку кернинга, лигатур, различных толщин, а также поддержку отображения сложных начертаний, всё же авторов ограничивало использование в своих дизайнах только общедоступных шрифтов. Firefox 3.5 снимает это ограничение, вводя поддержку CSS-правила @font-face — это способ прицеплять шрифты TrueType и OpenType точно так же, как нынче прицепляют код и иллюстрации. Браузер Safari поддерживал этот вид гиперсвязи со шрифтом, начиная от версии 3.1, а в Opera объявили, что планируют поддержать его в Opera 10.

Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство @font-face задаёт используемое имя шрифтового семейства, и подгружаемый шрифтовой ресурс, и стилевые характеристики заданного начертания — скажем, полужирное ли оно, курсивное ли. Firefox 3.5 скачивает шрифты только по мере нужды, так что стилевой файл может задать полный набор шрифтов, из которых лишь выборочно несколькие станут использоваться в действительности.

/* Graublau Sans Web (www.fonts.info) */
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}

Браузеры, поддерживающие @font-face, отобразят текст при помощи Graublau Sans Web, тогда как более старые браузеры отобразят его при помощи либо Lucida Grande, либо начертания по умолчанию для sans-serif. Вот пример:

[Grumpy Grandpas!]

Копнём чуть поглубже


Сегодня бóльшей частью шрифтовые семейства состоят всего из четырёх начертаний: обычное, полужирное, курсивное и полужирное курсивное. Чтобы дать определение каждому из этих начертаний, используются дескрипторы «font-weight» и «font-style». Они задают стиль начертания; принципы каскадности и наследования к ним здесь не применяются. Не будучи задан явно, каждый из них по умолчанию обретает значение «normal»:

/* Gentium by SIL International */
/* scripts.sil.org/gentium */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf);
  /* font-weight, font-style ==> по умолчанию normal */
}
 
@font-face {
  font-family: Gentium;
  src: url(GentiumItalic.ttf);
  font-style: italic;
}
 
body { font-family: Gentium, Times New Roman, serif; }

Текст примера показан ниже отображённым при помощи этого шрифтового семейства:

[Пример Gentium]
Есть особенность, которую нетрудно проглядеть: @font-face дозволяет создание семейств с бóльшим количеством начертаний, нежели просто обычное и полужирное — внутри единого семейства можно определить до девяти значений жирности. Это справедливо даже для Windows, где внутренние недостатки платформы обыкновенно ограничивают шрифтовые семейства только обычным и полужирным значением жирности. Существующие шрифты, подобные японскому проекту M+ Fonts (с открытым исходным кодом), обладают аж семью жирностями. В качестве примера приведём выборку их:

[M+ Fonts]
В некоторых обстоятельствах авторы могут предпочесть использование шрифтов, доступных читателю локально, а скачивать шрифты только тогда, когда соответствующие начертания недоступны. Это возможно, если использовать «local()» при задании дескриптора «src» во правиле @font-face. Браузер последовательно станет пробовать элементы списка шрифтов из дескриптора «src», покуда успешно не закачает желаемый шрифт.

/* MgOpen Moderna */
/* www.zvr.gr/typo/mgopen/index */
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue"),
       local("HelveticaNeue"),
       url(MgOpenModernaRegular.ttf);
}
 
@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
       local("HelveticaNeue-Bold"),
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

Вот скриншот, показывающий сверху вниз итоги отображения в Mac OS X, Windows и Linux простого примера, использующего определённое выше шрифтовое семейство:

[пример]
Шрифтовое семейство Helvetica Neue имеется в большинстве систем Mac OS X, однако обычно отсутствует на машинах Windows и Linux. Когда тутошний пример отображается на Mac OS X, используются локальные начертания Helvetica Neue, и никакой шрифт не скачивается. Под Windows и Linux попытка загрузить локальный шрифт терпит неудачу, и подстановочный шрифт (MgOpen Moderna) скачивается и используется вместо того. MgOpen Moderna планировался как замена Гельветике, так что отображается он похожим на Helvetica Neue. Таким способом автор может обеспечить желаемый облик текста, но избежать скачивания шрифта, когда в том нет нужды.

Имя, используемое для отсылки к конкретному начертанию шрифта — это полное имя отдельного шрифта. Обыкновенно это имя семейства плюс название стиля (например, «Helvetica Bold»). В Mac OS X имя показывается на информационной панели для указанного начертания. Выделите одно начертание и выберите «Show Font Info» из меню «Preview» в FontBook:

[пример сведений FontBook]
Подобные инструменты существуют и под Linux. Под Windows используйте расширение свойств шрифта, свободно скачиваемое от Microsoft средство просмотра этих имён. Когда расширение установлено, панель свойств показывает сведения об отдельном шрифте. Полное имя указывается как «Font Name» на вкладке «Name»:

[свойства шрифта в WIndows]
Safari под Mac Os X поддерживает поиск только по именам Postscript, так что имена Postscript под Mac OS X также поддерживаются. Для шрифтов OpenType PS (обыкновенно помечаемых расширением «.otf») полное имя совпадает с постскриптовым именем под Windows. Так что для этих шрифтов авторам рекомендуется указывать как полное имя, так и постскриптовое, и тем достигнуть кросс-платформенной работоспособности.

Поддержка многих языков


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

@font-face {
  font-family: Scheherazade;
  src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"),
       url(fonts/ScheherazadeRegOT.ttf) format("opentype");
}
 
body { font-family: Scheherazade, serif; }

Языкам, подобным арабскому, требуется такое изменение формы текста, при котором на отображение заданного символа влияют символы, его окружающие. Различные платформы используют различные технологии отрисовки, чтобы сделать изменение формы текста возможным; под Mac OS X необходимы шрифты AAT, в то время как под Windows и Linux необходимы шрифты OpenType. При отсутствии шрифта в формате, необходимом данной платформе, изменение формы текста не окажется отображённым правильно.

[пример арабского текста]
Под Mac OS X скачивается AAT-версия шрифта. На Windows и Linux, где отрисовка AAT-шрифтами не поддерживается, скачивание AAT-шрифта пропускается, и шрифт OpenType используется вместо него. Стало быть, текст отображается правильно на всех платформах.

Междусайтовое использование шрифта


По умолчанию Firefox 3.5 дозволяет шрифтам скачиваться только для страниц, полученных с того же сайта. Это предотвращает свободное и бесплатное использование сайтами шрифтов, обнаруженных на других сайтах. Для тех сайтов, которые явственно желают дозволить междусайтовое расшаривание шрифтов (например, для онлайновой библиотеки шрифтов), Firefox 3.5 поддерживает употребление заголовков контроля доступа, управляющих таким поведением. Добавляя дополнительный заголовок к заголовкам HTTP, посылаемым со шрифтовыми файлами, сайты могут сделать междусайтовое использование возможным.

# пример .htaccess-файла Apache для добавления заголовка контроля доступа

<FilesMatch "\.(ttf|otf)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

Когда включён этот заголовок HTTP, любая страница получает доступ ко шрифтам этого сайта, а не только страницы с того же сáмого сайта.

Проблемы лицензирования шрифта


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

«Я нашёл бесплатный шрифт, можно ли использовать его на моём сайте?»

Возможно; а возможно и нет. Некоторые бесплатные шрифты распространяются в качестве рекламных зазывных продуктов (чтобы поощрить ко приобретению их) — и их не дозволяется распространять самостоятельно или выкладывать на сервере в Паутине. Проверяйте лицензию, даже у бесплатных шрифтов.

«Я просто хочу использовать [здесь вставьте название любимого шрифта] на моём сайте. Это возможно?»

Прямо сейчас, скорее всего, нет. Использование прицепленных шрифтов в Паутине едва народилося. Бóльшая часть шрифтов, нынче идущих с собственническими операционными системами, имеют лицензии, ограничивающие их употребление стандартными десктопными приложениями, так что накачивание этих шрифтов на вебосервер, почти наверняка, не дозволяется. В прошлом шрифтопроизводство немало бедствовало от пиратства, так что большинство шрифтопроизводителей насторожённо относятся к дозволению использовать их шрифты за пределами сравнительно ограниченных контекстов. Многие поставщики шрифтов сосредоточилися на нуждах печатной промышленности, что нередко отражается и на сравнительной сложности их лицензий. В будущем некоторые дизайнеры шрифтов могут прийти к умозаключению, что продажи шрифтов в качестве шрифтов Паутины превзойдут любой потенциальный ущерб продажам от пиратства, а другие могут и не прийти к такому умозаключению. Лицензионные соглашения их отразят выбор их, и к ним следует отнестись с уважением.

Рынок продаж фотографии нередко называют двухбиллионным, а рынок шрифтов Паутины ещё близок к нулю, так что он может только возрастать!

Прицепление шрифтов в Internet Explorer


Прицепление шрифтов давно возможно в Internet Explorer, но только шрифтов в собственническом формате шрифта EOT. Есть единственный способ создания EOT-шрифтов — воспользоваться майкрософтовским инструментом WEFT, доступным только на Windows. Только шрифты TrueType и OpenType TT могут быть преобразованы в формат EOT, а шрифты OpenType PS (.otf) использоваться не могут.

Во правилах @font-face браузер Internet Explorer воспринимает только дескрипторы font-family и src, так что каждое семейство может содержать только одно начертание. Он не понимает указания format() и проигнорирует любое правило @font-face, содержащее такие указания. Это поведение можно использовать, чтобы задействовать прицепление шрифта кросс-платформенно:

/* Определение шрифта для Internet Explorer */
/* (*должно* стоять первым) */
@font-face {
  font-family: Gentium;
  src: url(Gentium.eot) /* нельзя использовать format() */;
}

/* Определение шрифта для других браузеров */
@font-face {
  font-family: Gentium;
  src: url(Gentium.ttf) format("opentype");
}

Грядущая работа


В Firefox 3.5 дескрипторы font-stretch и unicode-range не поддерживаются. Шрифты, определённые в документах SVG, также ещё не поддерживаются. Рассматривается внедрение их в будущих выпусках Файерфокса. Как всегда, патчи приветствуются!

Для дальнейшего чтения


Документация

Примеры

Шрифтовые ресурсы

Шрифтовая политика
+81
16 июля 2009, 15:10
John Daggett
Mithgol

комментарии (37)

  • раскрыть комментарий
    • Internet Explorer 4.0 и новее, Safari 3.1 и новее, Mozilla Firefox 3.5 и новее, Opera 10 и новее — какие ещё нужны браузеры?
      • раскрыть комментарий
      • Хром ничего не показал
        • Разработчики Хром (я предпочитаю называть Хром в женском роде, как в киберпанковском рассказе Уильяма Гибсона) заявили, что их код реализации @font-face недостаточно безопасен. Их японская команда сейчас проводит дополнительный аудит исходного кода. Затем начнут устранение проблем (и, вероятно, последующее внедрение этой возможности).
      • IE поддерживают font-face, у них свой особый механизм подгрузки шрифтов и свой формат для подгружаемых шрифтов, так что ослика вычёркивайте.
    • Посмотрите как выглядит админка нового Wordpress с кастомными шрифтами, возможно вы измените свою точку зрения. А по поводу совместимости браузеров — все лучшее и не стандартное рано или поздно становится стандартным — это и есть эволюция.
      • Это я согласен. Но к сожалению не могут все браузеры взять и одновременно обновится. Всегда будет кто-то впереди, кто-то сздаи
  • Спасибо большое за статью и за список литературы
  • Возможность хорошая, но из-за того, что файлы платных шрифтов отдавать клиенту нельзя, то частенько возникают сложности юридического характера, не стоит забывать об этом. Но ещё один браузер с поддержкой @font-face — это всё равно радует.
  • Оформление статьи просто образцовое.
  • Нативная возможность — это всегда хорошо, но сколько будет загружаться файл шрифта?
    А что будет показываться вместо текста, пока шрифт не подгрузился?
    • «А что будет показываться вместо текста, пока шрифт не подгрузился? „
      Встроенный шрифт. А вы примеры смотрели?
    • Я слышал слух о том, что на некоторых платформах в Safari 3.1 текст не отображается, покуда загружаемый шрифт не загрузится. Не знаю, правда или нет. В Файерфоксе отображается локальный шрифт, пока ещё не загрузился загружаемый из Паутины.
  • Ну, значит еще пол-годика — год, и можно будет забыть про куцый набор из стандартных гарнитур — это не может не радовать, и довольно странно, что в стандарте эта вещь появилась так поздно. Дружно выбросим все нынешние костыли и, заодно, станцуем на могиле ие6 :)

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

    За белка-шрифтелку автору — респект :)
    • Принимаю респект за белку-шрифтелку (я вообще сторонник творческого подхода к переводу). А вот для танцев на могиле IE6 статья не даёт прямого повода, так как @font-face поддерживается от IE4 и дальше. Криво, правда (не все дескрипторы, и формат только EOT). Но поддерживается. Тут, наоборот, надобно поклониться IE за первый блин, хотя он и комом вышел.
      • Хм, не знал, спасибо, просветили :)
  • спасибо за список свободных шрифтов
  • интересно, сколько будет весить шрифт для Unicode? =)
    • Сколько «весит» подгружаемый шрифт?

      Например, каждое из четырёх стандартных начертаний (нормальный, полужирный, полужирный курсив, курсив) всем известного шрифт Arial, весит от 500 до 800 килобайт. Если использовать на сайте все 4 стиля начертания, то получится более двух мегабайт. Очень приличный объём. Но это мелочи по сравнению с объёмом шрифта Arial Unicode MS — больше 20 мегабайт!

      Я воспользовался инструментом WEFT и поэкспериментировал со шрифтом Arial нормального стиля начертания без разложения шрифта по каким-либо признакам. Исходный размер arial.ttf составляет 766 килобайт, а уже сформированный arial.eot стал весить 308 килобайт. Контейнер EOT сжал файл в 2,5 раза. Хороший результат. Для примера, максимальное ZIP-сжатие того же шрифта — 423 килобайта, RAR — 370 килобайт. Что касается gzip, то Владимир Левантовский из Monotype подметил, что “EOT-компрессия лучше компрессии gzip на 20-30% для западных шрифтов”.

      Внедрение шрифтов — EOT и @font-face
      • с таким весом шрифтов font-face еще нескоро у нас приживется:(
    • Можно на примерах прикинуть.

      Arial Unicode MS весит четверть сотни мегабайтов (содержит 50 377 глифов).

      Free Serif весит килобайтов шестьсот (содержит 3513 глифов).

      Palatino Linotype весит чуть менее полумегабайта (1328 глифов + 148 пар кернинга).

      Эти примеры — просто для прикидывания по размеру, конечно. Так как Free Serif свободен совершенно, а в отличие от него лицензионный Palatino стоит больше полутысячи евро, и выкладываться может только в EOT, а не в TTF, например.
    • aps
    • aps
    • 16 июля 2009, 16:43
    • #
      • –2
    Со времен ie4 каналы стали шире, но не так, чтобы эта технология могла прижиться.
    • а может не надо? :) просто говорю как пользователь…
      • Ну «дизайнеры» страдают. Смириться с ограничениями по шрифтам никак не могут. Вот и идет поток. Хотя если ширина какналов будет расти с такой скоростью как за последние 10 лет, еще через 10 лет это станет востребованым.
  • Мне в Убунте в firefox 3 не понравились шрифты по умолчанию, для меня они не достаточно четкие, поэтому я поставил Arial и запретил веб-сайтам использовать свои шрифты. Видимо я не увижу всей этой красивости. Ведь так?
  • Эх, вот если бы без шаманства с .otf, c использованием стандартного .ttf, то бы цены этому атрибуту в css небыло. А так: ну красиво, ну весить будет .otf прилично, ну дополнительная нагрузка на сервер, так ещё все шрифты дополнительно переводить надо, а не просто «Взял с компьютера понравившийся шрифт, залил на сервер и радуешься жизни».
    • Пожалуйста, прочтите статью полностью. Шрифты TrueType поддерживаются невозбранно всеми браузерами, кроме Internet Explorer.
      • Перечитал статью, здорово, тогда этому атрибуту в CSS действительно цены нет!

        Вот только с поддержкой шрифтов всё наладится и когда подновляющее большинство пользователей перейдёт на последние версии браузеров (имею в виду Opera) сразу же начну использовать.
  • Начал было собирать стилистические ляпы, потом нечеловеческие обороты, а потом просто руки опустились. Вы вообще в себе?! Ужасный машинный перевод.
    накачивание этих шрифтов на вебосервер, почти наверняка, не дозволяется
    шрифтопроизводителей насторожённо относятся к дозволению использовать их шрифты за пределами сравнительно ограниченных контекстов
    Лицензионные соглашения их отразят выбор их, и к ним следует отнестись с уважением

    Потратить чуть больше времени и опубликовать перевод по-русски, а не по-кретински — это слишком сложно для вас?

    Так, в качестве совета, пока вы не начали агрессивно оправдываться: эта технология с самого начала называлась «embedded fonts» и переводилась как «внедрённые шрифты», но на западе уже устоялся и широко употребляется термин «web fonts», поэтому простое русское «веб-шрифты» будет здесь уместнее всего.
    • Думаю, если бы Вы посмотрели, кто автор этого топика, то таких вопросов у Вас бы не возникло :)
      • Я последнее время мало читаю Хабр, поэтому отстал от модных трендов.
        Просветите?
        • Простите за ссылку на небогоугодный ресурс: lurkmore.ru/Mithgol
          • Я искренне надеялся, что это однофамилец >_<
    • Охотно верю, что эта технология называлася (Майкрософтом) «embedded fonts», однако John Daggett не употребляет термин «embedded» ни единого разу (кроме гиперссылки на Билла Хилла из Майкрософт в конце блогозаписи), и я также решил при переводе не насиловать мозилльский первоисточник в угоду майкрософтовским стереотипам.
  • Всё это круто, но в интернете найти свободные кириллические шрифты, по качеству хотя бы немного дотягивающие до уровня Fontin невозможно — их просто нет…
  • Я себе мозг сломал.
    Почему вот такой код
    clip2net.com/clip/m21706/1262887973-clip-18kb.png
    clip2net.com/clip/m21706/1262888032-clip-14kb.png
    дает такую картину:
    clip2net.com/clip/m21706/1262888074-clip-585b.png

    Т.е. абсолютно всё равно, что именно написано в src у font-family: 'MgOpenModernaOblique';
    всё равно грузится MgOpenModernaOblique.ttf, хоть и написано

    Как это происходит и почему?
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.