Creative Web Typography Styles
ДЕМО / СКАЧАТЬ
bestwebfonts.com - онлайн сервис работы с гуглевскими фонтами
This is a handpicked selection with only the best web fonts from Google font directory, currently this directory contains almost 450 fonts, it has become hard to select or even load all fonts, so bestwebfonts.com can be a saver time tool.
http://www.bestwebfonts.com/
@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, вдохновляйтесь -)
Ресурс по подбору шрифтов
Фонтов.нет - это ресурс где можно найти и скачать подходящий для Вас шрифт. Удобно, красиво и хорошо каталоголизировано.
