Що таке і навіщо потрібні вбудовані шрифти?
На світі існує тисячі класних шрифтів! Більшість з них платні, та є багато безкоштовних. До останнього часу привілегія використання яких завгодно шрифтів належала сфері друкованого дизайну. Натомість, веб дизайнери користувались певним набором незмінних системних шрифтів типу Arial, Tahoma, Georgia, Times New Roman і ще купки мало відомих. Однак, тепер використання вбудованих шрифтів є легким і доступним методом урізноманітнити веб сайт, зробити його справді стильним і оригінальним. Замість звичних простакуватих шрифтів для заголовків тепер дизайнери використовують справді підходящі, яскраві, шрифти що запам’ятовуються!
Принцип роботи вбудованих шрифтів полягає у тому, що сам шрифт встановлено на веб сервер, а CSS стилях сайту прописано де браузер може його знайти. У решті, застосування вбудованих шрифтів нічим іншим не відрізняється від застосування системних (або “web safe” – “безпечних для веб”) шрифтів. Вбудовані шрифти піддаються тому ж налаштуванні розміру, кольору і варіацій через CSS.
Давайте розглянемо очевидні переваги використання вбудованих шрифтів.
Кращий дизайн
Із зростанням популярності дизайнів базованих на типографії, ми можемо спостерігати все більше сайтів, що використовують цікаві шрифти. Треба зрозуміти правильно: стандартні шрифти не стали однозначно поганими – вони й досі рекомендовані для великих блоків тексту – але заголовки на сьогоднішній час вимагають чіткіших і привабливіших шрифтів, більш професійних і таких, що гармоніюють із тематикою дизайну всієї сторінки. Використання вбудованих шрифтів приносить більше свободи для дизайнерів, більшу різноманітність серед дизайнів взагалі.
Краща оптимізація
Пошуковики знаходять контент і рейтингують його в залежності від тегів, що є на сторінці. Ось чому семантичність так важлива. Водночас, теги заголовків важливіші за атрибути зображення. Саме тому, використання вбудованих шрифтів разом із тегами заголовків однозначно краще ніж використання зображень із заголовками хай і з відповідними атрибутами title i alt. Жоден пошуковик не зрозуміє, що означає картинка, зате одразу і з легкістю прочитає текст у заголовку.
Легкість використання
Це саме той пункт, що раніше зупиняв експансію вбудованих шрифтів у веб дизайн. Тепер їх використання є простішим простого!
Використання вбудованих шрифтів з допомогою @font-face
В останні роки метод @font-face залишається одним з найпростіших методів використання вбудованих шрифтів. Він найефективніший (можливість вбудувати будь-який відповідно ліцензований шрифт), найлегший у застосуванні (немає потреби у додаткових скриптах чи flash) і підтримується усіма браузерами. СSS правило дуже просте:
@font-face {
font-family: Droid Sans;
src: url('fonts/droid_sans.eot');
}
Підтримка @font-face у Internet Explorer, як майже все для даного браузера, має свої особливості. Річ у тім, що цей браузер розпізнає шрифти у форматі .EOT. У той же час формати .TTF і .OTF працюють у більшості браузерів. Тому безпечніше використовувати також файл у форматі .EOT. На щастя, є багато онлайн сервісів, що конвертують файл шрифта у формат .EOT. Таким чином кросс-браузерний код методу @font-face виглядатиме так:
@font-face{
font-family: Droid Sans;
src: url('fonts/droid_sans.eot'); /* Для IE */
src: local('droidsans'), url('fonts/droid_sans.ttf') format('truetype'); /* Для решти браузерів */
}
Лиш одна проблема із @font-face: без відповідної ліцензії на використання певного шрифта ви не маєте права долучати його таким методом, оскільки він може легко бути завантаженим із сайту, на якому використовується.
Альтернатива: SIFR, Cufon та FLIR
SIFR, Cufon та FLIR це методи використання вбудованих шрифтів з допомогою заміни на зображення використовуючи Flash або JavaScript. Кожен метод має свої особливості впровадження, але спільним для них є те, що всі вони створені бути на 100% дружніми для SEO.
Вбудовані шрифти через Google Fonts API
Із приходом Google Fonts API додати новий шрифт із Google Font Directory на сайт стало настільки ж просто, як додати два рядки коду. Перевагами цього методу є легкість застосування і кросс-браузерність. А недоліком – малий вибір шрифтів. Якщо поглянути на вкладку з шрифтами що підтримують кирилицю на Google Font Directory, то можна побачити лише 11 шрифтів. Насправді це дуже мало! Хоча ще рік тому їх було всього 4, а це означає, що хай малими темпами, але приріст відбувається. І це радує! 🙂
За підтримки:
Делаете ремонт или переезд? На выручку подоспеет мувинговая компания в Киев, когда надо что-то перевезти.
There is one comment
Коментування вимкнено.
Про мене
WordPress адепт і веб розробник. Люблю подорожувати і смачно поїсти :)
На рахунок “Жоден пошуковик не зрозуміє, що означає картинка” то це лише тимчасово. Пошуковики уже мають можливість розпізнавати текст на картинках, скоро і зображення розпізнаватимуть