Хабрахабр: Метки / свойства шрифта http://habrahabr.ru/rss/tag/свойства шрифта/ ru editor@habrahabr.ru habrahabr.ru Sat, 11 Feb 2012 23:55:12 GMT http://habrahabr.ru/ http://habrahabr.ru/i/logo.gif Хабрахабр <![CDATA[Каскадные Таблицы Стилей / [Перевод] Прекрасные шрифты посредством @font-face]]> http://habrahabr.ru/blogs/css/64596/ http://habrahabr.ru/blogs/css/64596/ 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!]
больше примеров, больше иллюстраций
]]> Thu, 16 Jul 2009 11:10:46 GMT Mithgol font-faceшрифтовые семействасвободные шрифтысвойства шрифтагарнитуры шрифтовначертания шрифтов