Свій шрифт на сторінці
Шрифт є невід'ємною частиною веб-дизайну, надає сайту виразність і впізнаваність, висловлює характерний стиль сайту і безпосередньо пов'язаний зі сприйняттям текстів. Добре підібраний шрифт може не помічатися, але без нього не буде тієї родзинки, що надає дизайну сайту завершеність.
Якщо у вас на комп'ютері вже встановлено специфічний шрифт, то в стилях досить додати рядок.
h1 {font-family: SuperPuperFont; }
Значенням властивості font-family виступає назва гарнітури шрифту, вона буде застосовуватися до всіх заголовкам <h1>. Але що побачать відвідувачі сайту, у яких наш ефектний і рідкісний шрифт не встановлений? Подібна ситуація найбільш імовірна, так що якщо браузер не розпізнає заявлений шрифт, він буде використовувати шрифт за замовчуванням, наприклад в Windows це Times New Roman. Весь наш ретельно продуманий шрифтової дизайн відразу розсиплеться і піде прахом, тому треба пошукати найбільш універсальне рішення. Перше що відразу ж спадає на думку - це організувати завантаження файлу шрифту на комп'ютер користувача і відображення тексту обраним шрифтом. У порівнянні з іншими методами на кшталт відображення тексту через малюнок цей спосіб найпростіший і універсальний.
Які плюси в результаті дає нам завантаження файлу шрифту з подальшим застосуванням через CSS.
- Текст легко додавати і правити.
- У браузері можна користуватися пошуком і знаходити бажані фрази.
- В налаштуваннях браузера можна зменшувати або збільшувати розмір шрифту домагаючись комфортного перегляду.
- Пошукові системи добре індексують вміст документа.
- Текст можна виділити і скопіювати в буфер, а також перевести на іншу мову.
- Параметри тексту на зразок міжрядкового відстані, кольору, розміру тощо легко міняти за допомогою властивостей CSS.
- До тексту знову ж через CSS просто додавати різні ефекти, наприклад тінь.
Як бачите, переваг дуже багато. Невеликі мінуси теж є і для балансу їх варто згадати.
- Не всі версії браузерів підтримують завантаження шрифт і один для всіх формат.
- Файл, що містить гарнітуру шрифту, може бути використано великий обсяг, сповільнюючи тим самим завантаження веб-сторінки.
У табл. 1 перераховані версії браузерів і формати шрифтів, які вони підтримують.
Табл. 1. Формати Формат Internet Explorer Chrome Opera Safari Firefox Android iOS TTF 9.0+ 4.0+ 10.0+ 3.1+ 3.5+ 2.2+ EOT 5.0-8.0 WOFF 9.0+ 5.0 3.6+ SVG 1.0+ 9.0+ 3.1+ 3.5+ 1.0+
Самий підтримуваний формат - TTF. За винятком IE до версії 9.0 і iOS всі браузери його прекрасно розуміють. Так що якщо у вас шрифт саме в цьому форматі і ви орієнтуєтеся на сучасні браузери, ніяких додаткових дій робити не доведеться. Досить в стилях написати наступний код (приклад 1).
Приклад 1. Підключення TTF
HTML5 CSS3 IE 8 IE 9 + Cr Op Sa Fx
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Шрифт </ title> <style> @ font-face {font-family: Pompadur; / * Гарнітура шрифту * / src: url (fonts / pompadur.ttf); / * Шлях до файлу зі шрифтом * /} h1 {font-family: Pompadur, 'Comic Sans MS ", cursive; } </ Style> </ head> <body> <h1> Сучасний елемент політичного процесу </ h1> <p> По суті, політичне вчення Монтеск'є призводить континентально-європейський тип політичної культури, що отримало відображення в працях Міхельса. </ P > </ body> </ html>
Спочатку завантажуємо сам файл шрифту за допомогою правила @ font-face. Усередині нього пишемо назву гарнітури шрифту через параметр font-family і шлях до файлу через src. Далі використовуємо шрифт як зазвичай. Так, якщо нам потрібно задати шрифт заголовка, то для селектора h1, як показано в прикладі, задаємо властивість font-family з ім'ям завантаженого шрифту. Для старих версій IE через кому перераховуємо запасні варіанти. В даному випадку шрифт заголовка буде «Comic Sans MS", оскільки IE8 і нижче не підтримує формат TTF.
Результат даного прикладу показаний на рис. 1.
Мал. 1. Тема з завантаженим шрифтом
Що робити, якщо вам конче потрібен витіюватий шрифт в IE8? На щастя, @ font-face дозволяє підключати одночасно декілька файлів шрифтів різних форматів. Браузеру залишається тільки вибрати підходящий. Таким чином, універсальне рішення, яке працює у всіх браузерах, зводиться до конвертації наявного формату TTF в EOT з подальшим підключенням обох файлів.
Для конвертації є кілька онлайнових сервісів, що дозволяють завантажити TTF-файл і на виході отримати EOT-файл. На жаль, у більшості цих сервісів одна і та ж біда - файл ми отримуємо, але російську мову в ньому не підтримується. У підсумку потрібний результат не досягається, конвертація відбувається невірно. Серед перевірених мною сайтів виявився один, який показав текст в IE правильно.
http://www.kirsle.net/wizards/ttf2eot.cgi
Переходимо на цей сайт, завантажуємо TTF-файл і натискаємо кнопку «Convert TTF to EOT», після чого зберігаємо отриманий файл в папку зі шрифтами. У стилях залишилося зробити невеликий трюк і змусити різні браузери завантажувати шрифт в потрібному форматі. Для цього додаємо два параметра src. Перший вказує на файл EOT і призначений для старих версій IE. Другий параметр src повинен містити дві адреси перераховуються через кому, один з них вказує на файл TTF. Справа в тому, що IE версії 8.0 і молодше не розуміє кому в параметрі src і, відповідно, буде ігнорувати параметр цілком. Варіантів написання може бути кілька, наприклад, повторити url, вказати ім'я шрифту всередині параметра local або взагалі написати неіснуючий шрифт. Якщо браузер не зможе завантажити такий шрифт, то він перейде до другого в списку, а він у нас написано правильно. Допустимі способи написання.
src: url (fonts / pompadur.ttf), url (fonts / pompadur.ttf);
src: local (pompadur), url (fonts / pompadur.ttf);
src: local ( 'bla bla'), url (fonts / pompadur.ttf);
Працюючий варіант підключення шрифту для всіх версій браузерів показаний в прикладі 2.
Приклад 2. Підключення EOT
HTML5 CSS3 IE Cr Op Sa Fx
<! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Шрифт </ title> <style> @ font-face {font-family: Pompadur; / * Гарнітура шрифту * / src: url (fonts / pompadur.eot); / * Для IE5-8 * / src: local (pompadur), url (fonts / pompadur.ttf); / * Для інших браузерів * /} h1 {font-family: Pompadur, 'Comic Sans MS ", cursive; } </ Style> </ head> <body> <h1> Сучасний елемент політичного процесу </ h1> <p> По суті, політичне вчення Монтеск'є призводить континентально-європейський тип політичної культури, що отримало відображення в працях Міхельса. </ P > </ body> </ html>
Що стосується iOS, то робити і завантажувати окремий шрифт в форматі SVG як мені здається немає особливого сенсу. Аудиторія сайтів проглядає його через iOS поки невелика, до того ж версію сайту під мобільні пристрої намагаються полегшити, і завантажувати додаткові кілька десятків кілобайт не бажано.
Зручний сервіс, що бере на себе рутину з підтримки різних форматів шрифтів і версій браузерів, ви знайдете за адресою www.google.com/webfonts . Хоча в колекції порівняно мало різних шрифтів (їх кілька десятків), всі вони підібрані дуже якісно і вільні для використання на сайтах.
Перед вибором шрифту переведіть значення Script на Cyrillic, тоді ви побачите список шрифтів підтримують російську мову (рис. 2).
Мал. 2. Вибір шрифтів в Google Web Fonts
Сподобався шрифт попередньо слід додати в колекцію, натиснувши на кнопку «Add to Collection», а потім на кнопку «Use» в правому нижньому кутку екрану. На наступній сторінці (рис. 3) ви можете остаточно вибрати потрібні вам шрифти. При цьому треба розуміти, що гарнітура шрифту може містити кілька накреслень і кожне з них підвищує обсяг завантаження.
Мал. 3. Офлайн на сторінку шрифти
Підключити обрані шрифти можна одним з трьох шляхів, що додається код можна скопіювати нижче по сторінці.
1. Через елемент <link>. Рядок буде мати приблизно такий вигляд.
<Link href = 'http: //fonts.googleapis.com/css? Family = Philosopher & subset = cyrillic' rel = 'stylesheet' type = 'text / css'>
2. Через правило @import. Таку рядок вставляємо в свій CSS-файл в самому верху.
@import url (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
3. Через JavaScript.
В принципі, всі шляхи рівноцінні, так що вибирайте за власним смаком.
Переваги застосування даного сервісу такі.
- Шрифти вільні для використання, вам не потрібно за них платити.
- Пропоновані шрифти «заточені» для перегляду на екрані, файли оптимізовані і займають порівняно невеликий обсяг.
- Браузер визначається автоматично і під нього видається шрифт в потрібному форматі.
Один з основних плюсів сервісу, що шрифти зберігаються в форматах TTF, EOT, WOFF, SVG і завантажуються після перевірки браузера. Так, формат EOT буде доступний тільки для старих версій IE.
Використовувати Google Web Fonts чи ні вирішувати вам. Якщо не знайшли там відповідного шрифту, завжди можна підключити популярний і поширений TTF. Тим більше, що він підтримується останніми версіями всіх популярних браузерів.
Але що побачать відвідувачі сайту, у яких наш ефектний і рідкісний шрифт не встановлений?Com/css?
Com/css?