Font-face підключення нестандартних шрифтів

Internet Explorer 9
Firefox 3.6+
Opera 11+
Google Chrome 6 +
Safari 5.1
Opera Mobile 11+

Така велика кількість форматів обумовлено максимальною підтримкою всіх браузерів. При цьому, браузер завантажує перший зрозумілий йому зі списку шрифт (за умови вказівки правильного формату). Формати описуються в порядку збільшення ваги. Але, не дивлячись на те, що формат «WOF» найлегший, на першому місці стоїть - «EOT». Це необхідно для уникнення неккоретного відображення в IE 6-8.

Читайте також: Основи семантичної верстки на HTML5

Чи варто вказувати - format?

Декларація «format» необхідна для того, щоб браузер зміг відразу визначити для себе потрібний йому формат. Тобто при завантаженні він всього лише відбирає потрібний і зрозумілий йому формат зі списку. Що буде якщо не вказати format? Якщо у вас не вказано формат, але при цьому підключено більше одного браузер їх почне грузити все підряд і перебирати в пошуку потрібний. Звідси випливає, що підключаючи більше одного формату шрифтів, вказівка ​​декларації «format» обов'язково! Не забувайте, що на обробку витрачатися певний час, а тут ми можемо виграти.

Для задіяння всіх форматів наш css-код прийме наступний вигляд:

Увага! Даний сервіс тепер платний. Сервіс тепер доступний за передплатою, правда ціна символічна - 1 міс. - 3 $.

Font-face підключення нестандартних шрифтів

Нам відразу ж пропонують подивитися демо, а також завантажити архів з шрифтами і індексним файлом.

Font-face підключення нестандартних шрифтів

Читайте також: Enquire.js - створюємо адаптивні сайти легко

Важливо! Змініть шляху до файлів шрифтів на коректні, інакше нічого працювати не буде!

Далі необхідного елементу ми прописуємо в стилях ім'я шрифту:

Ще сервіси Font-Face

В якості альтернативи можу також запропонувати безкоштовні сервіси-генератори font-face:

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

На останок я хотів би відзначити всі переваги і недоліки даного методу.

переваги:

  • висока швидкість завантаження сторінки, при будь-якій кількості використання нестандартних шрифтів;
  • гнучкість в роботі верстальника, тексти можна змінювати без всяких проблем;
  • Більш точно передає, адже це текст, а не картинка чи флеш, або ще що небудь;
  • досить просто реалізувати з урахуванням генерації необхідних форматів.

недоліки:

  • даний метод підтримується не всіма браузерами, навіть незважаючи на те, що ми використовували різні формати. Не забуваємо, що у кожного браузера може бути багато версій;
  • деякі файли шрифтів можуть бути досить таки важкими і важити кілька мегабайт (хоча, це можна вирішити), а це може значно вплинути на швидкість завантаження сторінки;
  • поки шрифт подгружается користувач хоч і на мить, але все ж бачить стандартний шрифт (тут залежить від розміру шрифту);
  • можуть з'являтися іноді незначні баги - при наведенні мишкою спотворюється колір (Safari, Chrome, Opera);
  • у шрифту може бути правовласник, а в даному випадку його легко буде вкрасти.

Загалом вирішувати вам яким із способів підключення нестандартних шрифтів вам використовувати. Мені особисто підходить даний варіант.

Заур Магомедов

У мене ви можете:

Замовити верстку Замовити сайт під ключ