@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, вдохновляйтесь -)