Ось приклад реалізації на нашому порталі.
@font-face {
font-family: 'MyFont';
src: url('../font/myfont.eot');
src: local('MyFont'),
local('MyFont'),
url('../font/myfont.eot?#iefix') format('embedded-opentype'),
url('../font/myfont.woff') format('woff'),
url('../font/myfont.ttf') format('truetype');
}
Пояснення:
font-family: 'MyFont';
— назва шрифта, яку для ідентифікаторів та класів використовуємо для значення font-family. Наприклад: h1 { font-family: 'MyFont'; }
src: url('../font/myfont.eot');
— шлях та сам шрифт для IE, який підтримує свій формат шрифтів .eot
Щоб для браузерів не завантажувати шрифти які вони не підтримують задамо наступне правило:
src: local('MyFont'),
local('MyFont'),
url('../font/myfont.eot?#iefix') format('embedded-opentype'),
url('../font/myfont.woff') format('woff'),
url('../font/myfont.ttf') format('truetype');
Тут у нас іде перевірка на наявність локального шрифта на нашому компьютері, далі за допомогою фіксу який не розуміє IE закриваємо доступ до шрифтів які не підтримуються у ньому і завантажуємо лише в його рідному форматі .eot. Інші браузери будуть ігнорувати цей фікс і обирати шрифт який вони підтримують.
Зауважте, що .woff — це стиснутий формат шрифта і він підтримується усіма (практично) окрім IE.
В мережі можна знайти багато он-лайн конвекторів із одного формату в інший формат шрифта.
Цей метод забезпечить кроссбраузерність відображення користувацького шрифта засобами CSS!
