#5 Шрифти для Веб

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

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

Досвідчений розробник знає, що браузер може використовувати для відображення сторінки лише ті шрифти, які встановлені на комп'ютері у користувача. З цієї точки зору шрифти можна умовно розподілити до двох категорій:

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

Веб-безпечні шрифти

В Інтернеті історично склалося таке поняття як «безпечні» веб-шрифти. Безпечним шрифтом можна назвати шрифт, який є стандартним для всіх операційних систем. Нажаль, абсолютно безпечних шрифтів не існує. Окремі шрифти можна назвати безпечними з деякими обмовками.

Основою для визначення «безпечних» шрифтів послужили шрифти найбільш поширеної операційної системи Windows, які використовуються в інших операційних системах.

• Arial
• Arial Black
• Comic Sans MS
• Courier New
• Georgia
• Impact
• Times New Roman
• Trebuchet MS
• Verdana

Ці шрифти є в кожного користувача Windows, Mac OS і у переважної більшості користувачів Unix/Linux.

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

За замовченням, для відображення тексту буде застосовано перший за ліком шрифт. У разі його відсутності на комп’ютері користувача для відображення буде використано наступний за ліком шрифт, і так далі. Зрештою, браузер обере з переліку відповідний для відображення шрифт.

Нестандартні (довільні) шрифти

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

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

Під’єднання шрифтів @ font-face в файлі стилів

Властивість CSS @font-face надає можливість втілити на сайт нестандартні шрифти, які можна вибрати в мережі або створити самостійно.

• Основное руководство по @font-face
• Під’єднання та оптимізація нестандартних шрифтів

Синтаксис CSS для оголошення користувацького шрифту дуже простий. Потрібно лише зазначити назву шрифту, джерело файлу шрифту і його можна застосувати до будь-якого елементу.

@font-face {
	font-family: "MyFontName";

	src: url('font.ttf');
}

body {

	font-family: "MyFontName";/використовуємо підключений шрифт */

}

Оскільки різні браузери підтримують різні формати користувацьких шрифтів. Щоб уникнути колізій у відображенні на сайті і домогтися кросбраузерності, краще використовувати наступний спосіб.

  
@font-face {
	font-family: "PT Sans Narrow";

	src: url("fonts/PTSans-Narrow.eot?") format("eot"), 

	url("fonts/PTSans-Narrow.woff") format("woff"), 

	url("fonts/PTSans-Narrow.ttf") format("truetype"), 

	url("fonts/PTSans-Narrow.svg#PTSansNarrow") format("svg"), 

	url("fonts/PTSans-Narrow.otf") format("opentype");

}	

body {
	font-family: 'PT Sans Narrow', sans-serif;
}


Примітка: знак "?" після *.eot є обов'язковим для адекватного спрацювання шрифту в IE.

Колекція шрифтів Google Font

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

На сервісі Google Web Fonts містяться інструкції по підключенню вибраного шрифту до сайту, проведення налаштування зовнішнього вигляду онлайн шрифту і отримання повного набору CSS властивостей, які потрібно додати у файл стилів сайту.

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

• Google Web Fonts

• Як підключити Google Fonts

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

Всі онлайн шрифти в Google Font API поширюються за вільною ліцензією і даний спосіб їх під’єднання до сайту буде кросбраузерним за замовчуванням.

Іконковий шрифт Line Awesome

Шрифт LineAwesome - гідна заміна FontAwesome. Ці шрифти містять колекції масштабованих векторних іконок. Іконки можна форматувати за допомогою css-властивостей, встановлювати для них колір, розмір, тінь і багато іншого.

• Font Awesome vs Line Awesome

• Line Awesome

• Font Awesome

Іконкові шрифти

• Material Design Icons

• Android Icons

• Stackicons

Порядок роботи

1. Ознайомитися з теоретичними матеріалами щодо веб-типографіки, основними характеристиками шрифтів та особливостями веб-форматів.
2. Завантажити нестандартний шрифт (наприклад, сервіси Fontesk, Fontsquirrel) та під’єднати його до сторінки. Оформити даним шрифтом певні елементи (заголовки, пункти навігації тощо).
3. Під’єднати до сторінки Google-шрифт. Застосувати його до певних елементів (заголовки чи особливі ділянки сторінки).
4. Ознайомитися з ресурсами, що надають у використання іконкові шрифти. Уважно прочитати документацію щодо уставляння іконок та особливостей надання їм стилів. Створити певну ділянку на сторінці, де розмістити художньо оформлені іконки з відповідною інформацією.
5. Протестувати сторінку на різних браузерах та пристроях.
6. Розмістити сторінку на хостингу. Результат виконання демонструвати в Інтернеті.
7. Під час виконання роботи робити скріншоти основних етапів роботи. Оформити звіт.

Зміст звіту

1. Назва та мета виконання лабораторної роботи.
2. Скріни етапів виконання роботи та результати втілення шрифтів та іконок на сторінки. HTML код, що було вставлено на сайт.
3. Короткий опис редагування svg-зображення, його xml-код, та код, що було вставлено на сайт.
4. У висновку оцінити особливості використання нестандартних шрифтів, іконок, svg-зображень та різні можливості уставляння.

Контрольні питання

1. Назвіть основні сімейства комп’ютерних шрифтів. Яке сімейство найкраще використати для сайтів?
2. До яких двох категорій можна віднести шрифти, що застосовують для веб?
3. Перелічіть відомі веб-формати шрифтів.
4. Назвіть підходи для застосування довільного шрифта на сторінці.
5. Які характеристики шрифта є суттевими для використання на сайті?
6. Які css-властивості можна застосувати для шрифтів?
7. Яким чином можна під’єднати шрифт з колекції Google Fonts?
8. Що таке іконковий шрифт, яким чином йоно можна використати на сайті?
9. Здійснити порівняльний огляд відомих для вас іконкових шрифтів.
10. Яким чином можна відредагувати svg-іконку?