Нестандартні шрифти на сайті
Коли виникає завдання, що на сайті потрібно використовувати нестандартний шрифт, можна піти кількома шляхами:
1. font-face метод – для цього достатньо в CSS написати (цей метод не підтримується в браузерах IE). Хоча метод досить поширений, коли ви готові заплющити очі на неможливість відображення в Internet Explorer
@font-face font-family: 'Hagin Caps Medium'; font-style:normal; font-weight:400; src:local('Hagin Caps Medium'), local('HaginCapsMedium'), url('HaginCapsMedium.otf') format('opentype'); >
2. Нарізати картинок із заголовками з jpg і вставляти замість тексту картинки.
3. sIFR - найбільш уживаний на сьогоднішній день, але його недолік - вимагає наявності Flash-плагіна. Хоча зараз це важко назвати недоліком, але якщо є інструмент, що дозволяє обійтися без плагінів, то це не може не радувати.
4. Typeface.js
5. Cufon – сьогодні це найновіший метод, який є гідною альтернативою sIFR і показує чудові результати, який і буде розглянуто.
Переваги використання технології Cufon:
- – Заснований на Javascript/jQuery;
- - Не вимагає встановленого флеш-плеєра на сайті (більш швидкодіючий);
- - Дуже простий в установці та налаштуванні;
- - працює на мобільних пристроях;
- – Не вимагає додаткового коду CSS, як цього вимагає технологія sIFR;
- - Кросбраузерність
Існує думка, що Cufon не підтримує ефект CSS hover при наведенні на нього мишки. Але ви можете дуже просто зробити це за допомогою
Як працює
Що потрібно для використання Cufon
Ось список того, щовам потрібно встановити:
1. Основну бібліотеку jQuery (http://jquery.com)
3. Вибраний шрифт.
Сам файл шрифту сам по собі не працюватиме, вам потрібно використовуючи генератор створення шрифту перетворити його на необхідний формат javascript, а ось цей файл ви вже повинні підключити. Для перетворення можна використовувати .TTF, .OTF або .PFB файли
Як підключити Cufon на сайт
Скопіюйте всі необхідні файли на сервер, наприклад, в папку scripts і вставте наступний код тег.
Тепер вибираємо елементи, до яких необхідно застосувати нестандартний шрифт: