veselov.sumy.ua > Версия для печати > @font-face любой шрифт на сайте без js

Как-то раз я попал на сайт http://greenonion.in/ и приглянулись мне необычные шрифты. Попробовал выделить они еще и текстовые!

Посмотрел исходник явы нет. Полез в CSS, нашел там это:

@font-face {
    font-family: 'MadeinChinaRegular';
    src: url('madec___-webfont.eot');
    src: local('O'), url('madec___-webfont.woff') format('woff'), url('madec___-webfont.ttf') format('truetype'), url('madec___-webfont.svg#webfont0oKtehey') format('svg');
    font-weight: normal;
    font-style: normal;
}

Для меня это было в новинку. Чего я только не использовал для изменения стандартных шрифтов но такое как указано выше, никогда. Стало любопытно.

И тут я открыл глаза.

CSS-правила @font-face — это способ прицеплять шрифты TrueType и OpenType!

Начиная с Firefox 3.5, Google Chrome 2, Opera 10 и Safari 3.1 стало возможным использовать в этих браузерах CSS-правило @font-face. На данный момент эти браузеры обрабатывают любой шрифт форматов OTF и TTF без необходимости конвертации в защищённый формат EOT. Это существенное отличие от Internet Explorer, который поддерживает использование шрифтов только в формате EOT.

Пример внедрения и использования шрифта

/* только для Internet Explorer 4+ */
@font-face {
  font-family: EuroSansProLig;
  src: url(EuroSansProLig.eot);
}

/* далее для всех остальных браузеров */
@font-face {
  font-family: Graublau Sans Web;
  src: local("Graublau Sans Web"),
       local("GraublauSansWeb"),
       url(GraublauWeb.otf) format("opentype");
}

body {
  font-family: Graublau Sans Web, EuroSansProLig,
  Arial, sans-serif;
}

Свойство local проверяет наличие шрифта на компьютере пользователя, и если шрифт не обнаружен, то он подгружается с сервера. Свойство format указывает формат шрифта (“truetype”, “opentype”,”truetype-aat”, “embedded-opentype” и “svg”). Если шрифты Graublau Sans Web и Euro Sans Pro отсутствуют, то для body будет использоваться Arial или любой рубленый шрифт по умолчанию.

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

Таким образом к предыдущему примеру добавляется следующий CSS:

/* только для Internet Explorer */
@font-face {
  font-family: EuroSansProLigBold;
  src: url(EuroSansProLigBold.eot);
}

/* далее для всех остальных браузеров */
@font-face {
  font-family: Graublau Sans Web Bold;
  src: local("Graublau Sans Web Bold"),
       local("GraublauSansWebBold"),
       url(GraublauWebBold.otf) format("opentype");
}

p {
  font-family: Graublau Sans Web Bold, EuroSansProLigBold,
  Arial, sans-serif;
  font-weight: bold;
}

Прицепление шрифтов в 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");
}

ПС: сайт посвещен типографики http://typeinspire.com, вдохновляйтесь -)