Як використовувати сторонні шрифти на сторінці?
(044) 391-40-82
Контакти
Головна → Статті → Як використовувати сторонні шрифти на сторінці?
20.09.2013

Як використовувати сторонні шрифти на сторінці?


Як використовувати сторонні шрифти на сторінці?

Незважаючи на те, що сторонні шрифти, достатньо компромісне рішення на сайті, їх все частіше використовують веб-дизайнери, адже так хочеться зробити сайт гарніше. Отже, як же впровадити даний шрифт?

Перший метод використання стороннього шрифту на сторінці - це завантаження його з відповідної бази шрифтів на сервер, а потім прописування в CSS за допомогою правила @ font-face. Припустимо, Ви знайшли і завантажили шрифт Ledger. Створюємо на сервері папку, наприклад, font і завантажуємо туди шрифт Ledger.ttf, а потім, використовуючи правило @ font-face, прописуємо в css-файлі шаблону наступний код:

@font-face {
       font-family: 'Ledger';
       src:
               local('Ledger'),
               url('/font/ledger.ttf') format('truetype');
}

Таким чином, ми прописуємо шлях до файлу шрифту.Щоб використовувати даний шрифт, наприклад, для всіх абзаців, в CSS прописуємо властивість для тексту усередині абзацу:

p{
       font-family: 'Ledger';
}

Втім, пропонований метод впровадження шрифту вважається дещо застарілим з тих самих причин, що він найменш кросбраузерний.

Досить найпопулярнішою є підвантаження шрифту за допомогою сервісу від «Google» (google.com / webfonts). Тут Ви знайдете близько 50 кириличних шрифтів і набагато більше з підтримкою шрифтів латинці.

Отже, на сервісі вибираєте шрифт який Вам сподобався і додаєте його в колекцію. Під прикладом відображення шрифту натискаємо на посилання Quick-use, отримуючи додаткову інформацію. Спочатку оцініть час завантаження сторінки при використанні даного шрифту і обраних налаштувань, потім виберіть набори символів, які хочете використовувати на сайті (латиниця, розширена латиниця, кирилиця та розширена кирилиця).

Якщо Ви плануєте використовувати і кирилицю, і латиницю, то в панелі, де визначається «тип відображення», виберіть Latin і Cyrillic. Потім визначтеся з типом установки коду на Ваш сайт. Запропонований системою код з вкладки standard вставляєте в <head> Вашого шаблону. Теж саме з варіантом вставки скрипта. Якщо ж Ви вибрали @ import», то код вставляєте в початок CSS-файлу. Далі прописуєте властивість font-family для необхідного елементу (font-family: 'Ledger', Arial, serif).

Популярне використання технології Cufon

Проте найбільш кросбраузерним додаванням шрифту на сайт вважається використання технології Cufon або онлайн-генератора Fontsquirrel. Що стосується куфона, то спочатку підключаєте в <head> шаблону бібліотеку Cufon, додаючи туди наступний код:

<script type="text/javascript" src="http://сайт куфон/js/cufon-yui.js"></script>. 

Потім переходьте на «http://cufon.shoqolate.com/generate/» і, вибравши необхідні опції, генеруєте шрифт. Завантажуєте згенерований файл на хостинг і знову підключаєте в

<head>: <script type="text/javascript"src="назва_згенерованого_файлу"></script>.

Щоб використовувати шрифт в тезі <h1>, потрібно в <head> прописати такий код:

<script type="text/javascript">   Cufon.replace("h1"); </script>

Успіхів Вам у майстерності впровадження та вдосконалення Вашого сайту за допомогою шрифтів. Сторонні шрифти дозволять виділити Ваш сайт серед інших, зробити його незвичайним, привабливим, відрізняючись від шаблонних ресурсів. Важливо, щоб користувач, зайшовши з будь-якого браузера, зміг правильно бачити Ваш контент.


Вам сподобався сайт?

Розповісти друзям