Использовать @font-face для гиперсвязи со шрифтом — сравнительно несложно. Внутри стилевого файла каждое свойство
/* 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, либо начертания по умолчанию
![[Grumpy Grandpas!]](http://hacks.mozilla.org/wp-content/uploads/2009/06/graublausanswebdemo.png)
Копнём чуть поглубже
Сегодня бóльшей частью шрифтовые семейства состоят всего из четырёх начертаний: обычное, полужирное, курсивное и полужирное курсивное. Чтобы дать определение каждому из этих начертаний, используются дескрипторы
/* 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]](http://hacks.mozilla.org/wp-content/uploads/2009/06/multiplefaces.png)
Есть особенность, которую нетрудно проглядеть:
![[M+ Fonts]](http://hacks.mozilla.org/wp-content/uploads/2009/06/multipleweights.png)
В некоторых обстоятельствах авторы могут предпочесть использование шрифтов, доступных читателю локально, а скачивать шрифты только тогда, когда соответствующие начертания недоступны. Это возможно, если использовать «local()» при задании дескриптора «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 простого примера, использующего определённое выше шрифтовое семейство:
![[пример]](http://hacks.mozilla.org/wp-content/uploads/2009/06/macwinlinrendering.png)
Шрифтовое семейство 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]](http://hacks.mozilla.org/wp-content/uploads/2009/06/fontbookinfo.png)
Подобные инструменты существуют и под Linux. Под Windows используйте расширение свойств шрифта, свободно скачиваемое от Microsoft средство просмотра этих имён. Когда расширение установлено, панель свойств показывает сведения об отдельном шрифте. Полное имя указывается как «Font Name» на вкладке «Name»:
![[свойства шрифта в WIndows]](http://hacks.mozilla.org/wp-content/uploads/2009/06/fontproperties.png)
Safari под Mac Os X поддерживает поиск только по именам Postscript, так что имена Postscript под Mac OS X также поддерживаются. Для шрифтов OpenType PS (обыкновенно помечаемых
Поддержка многих языков
Многие языки страдают от недостатка общедоступных шрифтов. В случаях с наречиями меньшинств и древними начертаниями выбор сужается буквально до горстки. Использование
@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. При отсутствии шрифта в формате, необходимом данной платформе, изменение формы текста не окажется отображённым правильно.
![[пример арабского текста]](http://hacks.mozilla.org/wp-content/uploads/2009/06/arabicsample.png)
Под Mac OS X скачивается
Междусайтовое использование шрифта
По умолчанию 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, любая страница получает доступ ко шрифтам этого сайта, а не только страницы с того же сáмого сайта.
Проблемы лицензирования шрифта
Когда шрифт используется на сайте, всегда важно убедиться, что лицензия шрифта дозволяет использование его на сайте. Если лицензионное соглашение преисполнено туманных юридических выражений, справьтеся у поставщика шрифта, прежде чем использовать шрифт на сайте. Если лицензия дозволяет его использование, тогда неплохо бы добавить комментарий подле правил
«Я нашёл бесплатный шрифт, можно ли использовать его на моём сайте?»
Возможно; а возможно и нет. Некоторые бесплатные шрифты распространяются в качестве рекламных зазывных продуктов (чтобы поощрить ко приобретению их) — и их не дозволяется распространять самостоятельно или выкладывать на сервере в Паутине. Проверяйте лицензию, даже у бесплатных шрифтов.
«Я просто хочу использовать [здесь вставьте название любимого шрифта] на моём сайте. Это возможно?»
Прямо сейчас, скорее всего, нет. Использование прицепленных шрифтов в Паутине едва народилося. Бóльшая часть шрифтов, нынче идущих с собственническими операционными системами, имеют лицензии, ограничивающие их употребление стандартными десктопными приложениями, так что накачивание этих шрифтов на вебосервер, почти наверняка, не дозволяется. В прошлом шрифтопроизводство немало бедствовало от пиратства, так что большинство шрифтопроизводителей насторожённо относятся к дозволению использовать их шрифты за пределами сравнительно ограниченных контекстов. Многие поставщики шрифтов сосредоточилися на нуждах печатной промышленности, что нередко отражается и на сравнительной сложности их лицензий. В будущем некоторые дизайнеры шрифтов могут прийти к умозаключению, что продажи шрифтов в качестве шрифтов Паутины превзойдут любой потенциальный ущерб продажам от пиратства, а другие могут и не прийти к такому умозаключению. Лицензионные соглашения их отразят выбор их, и к ним следует отнестись с уважением.
Рынок продаж фотографии нередко называют двухбиллионным, а рынок шрифтов Паутины ещё близок к нулю, так что он может только возрастать!
Прицепление шрифтов в Internet Explorer
Прицепление шрифтов давно возможно в Internet Explorer, но только шрифтов в собственническом формате шрифта EOT. Есть единственный способ создания
Во правилах @font-face браузер Internet Explorer воспринимает только дескрипторы
/* Определение шрифта для 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, также ещё не поддерживаются. Рассматривается внедрение их в будущих выпусках Файерфокса. Как всегда, патчи приветствуются!
Для дальнейшего чтения
Документация
- Документация по @font-face на сайте MDC
- Спецификация CSS2 Fonts
- Черновик CSS3 Fonts
- Рабочий черновик междусайтового расшаривания ресурсов
Примеры
- CSS @ Ten: The Next Big Thing
- Пример использования Graublau Sans
- Примеры интересной web-типографики
- Применение элементов типографского стиля к Паутине
Шрифтовые ресурсы
- Белка-шрифтелка
- 10 прекрасных свободных шрифтов для @font-face
- Онлайновое средство вычленения символьных подмножеств шрифта
- 40 превосходных свободных шрифтов (Smashing Magazine)
- FontTools/TTX — скрипты Python для отображения шрифтовых данных
Шрифтовая политика
- Билл Хилл (Microsoft) о внедрении шрифтов
- Крис Уилсон (Microsoft) о прямых гиперссылках на шрифты TrueType
- Robert O’Callahan пишет о форматах шрифтов Паутины
- Обсуждение форматов шрифтов на собрании W3C TPAC
- Блогозапись Марка Пилгрима с критикою словолитен
- Мысли Давида Барона о форматах скачиваемых шрифтов
комментарии (37)