Приклад використання нестандартних шрифтів на сайті
Нова версія HTML, 5-ї версії дозволяє використовувати власні шрифти на сайті. Тобто розширює їх кількість для використання. Фактично можна використати будь-який вільний шрифт на своєму сайті.
Таку технологію підтримує навіть клятий ІЕ ще з 4-ї версії, але він це реаліховує по-своєму, дещо відмінно від стандарту.
Я розгляну приклади використання власних шрифтів для нормальних браузерів і ІЕ.
CSS-правило @font-face
Починаючи з Firefox 3.5, Google Chrome 2, Opera 10 та Safari 3.1 стало можливим використання в браузерах CSS-правила @font-face. На даний момент ці браузери сприймають будь-які шрифти в форматах OTF і TTF. 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;
}
У прикладі використовується популярний шрифт Graublau Sans Web (безкоштовна версія повноцінного шрифту Graublau Sans Pro). З наведеного списку дозволених для впровадження шрифтів він єдиний на даний момент підтримує кирилицю. Цей шрифт формату OpenType PS, і WEFT не можна конвертувати його в EOT. Тому спеціально для Internet Explorer я вибрав безкоштовну версію шрифту Euro Sans Pro.
Властивість 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 4+ */
@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;
}
UPD
Можна
використати Google fonts api, це дозволяє завантажувати власні шрифти з серверу Google. Можна легко обрати шрифт, встановити його розмір, тип, стиль. Скопіювати код і вставити на свому сайті.
Але там небагато шрифтів із нашими літерами 
Приклад використання кастомного шрифту:
span.test-font {
font-family: 'IM Fell DW Pica', serif;
font-size:26px;
background-color:#ccc;
}
Custom font
Додаткова інформація:
- beautiful fonts with @font-face
- Прекрасные шрифты посредством @font-face
- Внедрение шрифтов — EOT и @font-face
- Как использовать Google Font API
Це буде цікаво переглянути:
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
