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

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

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

Тепер, коли позитивний ефект, що робиться красивими шрифтами на сайті, став нам очевидним, виникає резонне питання. "Так як же використовувати нестандартні шрифти на сайті?". Ключ до відповіді нього лежить у розумінні принципу роботи комп'ютерних шрифтів.

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

1. Файл певного формату. Файл шрифту, щоб його могла використовувати програма, з якою ми працюємо, має бути певного «відомого цій програмі» формату. Форматів комп'ютерних шрифтів є кілька, що автоматично породжує проблему сумісності. Всі зусилля з пошуку та підбору шрифту зникнуть, якщо він не підтримується програмою, в якій проглядається текст.
2. Використовується програмою чи ОС. Файл шрифту повинен бути фізично доступним системі, щоб його можна було використовувати для відображення тексту. В умовах Інтернету це – нетривіальне завдання. Адже сайт проглядається на багатьох різних комп'ютерах, і ми зовсім не можемо бути впевнені, що на них є необхідні шрифти.
3. Опис набору літер та знаків. Ми повинні бути впевнені, що шрифт містить гліфи, що описують всі символи в тексті, що відображається. Наприклад, якщо ми намагатимемося відобразити російський текст з використанням шрифту, в якому відсутні кириличні гліфи, у нас нічого не вийде.
4. Застосування для відображення символів. Необхідно мати спосіб проінформувати програму, в якій здійснюється перегляд тексту, про те, яка саме його частина має відображатися з використанням того чи іншого шрифту.

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

Пошук шрифту для веб-сайту

Найперше завдання, яке нам необхідно вирішити, - знайти і вибрати відповідний шрифт і переконатися, що:

• він підтримує потрібну мову (зокрема, російську)
• ліцензія шрифту допускає його використання на веб-сайті

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

• MyFonts - найбільша онлайн бібліотека шрифтів, надає зручну систему пошуку з детальною інформацією про кожну шрифтову родину та можливістю завантажити або придбати вибрані варіанти.
• Google Webfonts- бібліотека вільно-розповсюджуваних шрифтів, створена компанією Google, всі шрифти з цієї колекції можуть бути вільно використані на будь-яких сайтах, при цьому Google також надає простий інтерфейс для їх вбудовування.
• Adobe Edge Web Fonts - аналогічний сервіс від Adobe, що містить великий каталог вільно доступних шрифтів, засоби пошуку та тестування, можливість вбудовування в сайт.
• free.type.org.ua - колекція вільно-розповсюджуваних шрифтів з підтримкою кирилиці.

Якщо в назві шрифту його кирилична сутність не зазначена явно (наприклад, Museo Sans Cyrillic), то щоб переконатися в підтримці російської мови, необхідно або переглянути таблицю символів, що містяться в ньому, або спробувати щось їм написати. Деякі онлайн бібліотеки надають таку можливість, альтернативно можна використовувати сервіси для тестування шрифтів, наприклад:

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

Шрифт можна використовувати на сайті, тільки якщо ліцензійна угода (EULA), придбана у дизайнера або агентства, дозволяє це. Багато виробників шрифтів (у тому числі і кирилиць, наприклад, ParaType) надають таку ліцензію. Як альтернатива купівлі веб-ліцензії шрифту в окремого агентства, виступають сервіси вбудованих шрифтів (Web Font Embedding Services). Вони є віддалені бібліотеки шрифтів, що дають своїм клієнтам можливість підвантажувати шрифти і вбудовувати їх у свої сайти за деяку абонентську плату (огляд сервісів вбудовування). Найбільш популярні серед них:

Проте всі ці сервіси в силу свого походження орієнтовані насамперед на закордонний (що використовує латиницю) ринок та кількість шрифтів, що підтримують кирилицю, у них невелика. Ціна підписки на ці послуги досить висока і може бути визнана невиправданою для окремого некомерційного проекту. Достойною альтернативою їм служить використання вільно-поширюваних шрифтів, наприклад з Google Webfonts або Adobe Edge Web Fonts, що вже згадувалися, а також надаються окремими дизайнерами або агентствами (докладніше про проблему ліцензування шрифтів для веб розповідає стаття A List Apart).

Формати шрифтів для веб

Існують кілька форматів десктопних і веб-шрифтів, які по-різному проявляють себе в різних системах і призначені для вирішення різних завдань. Стосовно веб-сайтів нас цікавитимуть наступні формати:

TTF- TrueType – формат комп'ютерних шрифтів, розроблений фірмою Apple наприкінці 1980-х років, зараз використовується компаніями Apple та Microsoft у своїх операційних системах. Файли шрифтів мають розширення .ttf.

OTF- OpenType – формат файлу шрифтів розроблений спільно Microsoft та Adobe для застосування у своїх операційних системах. OpenType має більші в порівнянні з TrueType можливості до друкованої підготовки і підтримує більший набір символів при меншому розмірі файлу. Кросплатформенність OpenType досягається за рахунок включення в один файл і Windows і Mac OS-версій цього шрифту. Файли шрифтів мають розширення .ttfабо .otf.

EOT- Embedded OpenType - компактний формат шрифтів, що впроваджуються в веб сторінки OpenType, розроблений Microsoft. Файли таких шрифтів зазвичай мають розширення .eot. Формат Embedded OpenType є пропрієтарним і підтримується виключно браузером Internet Explorer.

WOFF- Web Open Font Format - формат стиснутого шрифту OpenType або TrueType, є щось на зразок контейнера, який містить у собі оригінальні шрифти у форматі OpenType або TrueType. При цьому вихідні шрифти стискаються для зручності передачі та супроводжуються рядом даних, які може додати розробник шрифту.

SVG- Scalable Vector Graphics - мова розмітки масштабованої векторної графіки, за допомогою якої можна описати і подання шрифту.

Веб-сайти переглядаються відвідувачами з використанням різних браузерів, які у свою чергу функціонують у різних операційних системах (Windows, Mac OS, Linux, Android, iOS тощо). Використовуючи нестандартний шрифт, ми маємо забезпечити його відображення у більшості (в ідеалі у всіх) випадках. Так як жоден із зазначених варіантів не є повністю крос-платформним, їх доведеться використовувати кілька, щоб вирішити це завдання. Зазвичай рекомендується мати наступну комбінацію форматів для встановлення на сайт: TTF, WOFF, EOT, SVG. Маючи шрифт TTF або OTF, можна конвертувати його, використовуючи, наприклад, генератор Fontsquirrel - сервіс дозволяє завантажити шрифт і конвертувати його в необхідні формати. Крім цього, він генерує код CSS, який можна використовувати для подальшого встановлення шрифтів на сайт.

Якщо використовується бібліотека Google або Adobe Edge, можна не турбуватися про формати. Програмний сервіс, що надається компаніями, визначає підтримку шрифту в більшості випадків.

Вбудовування шрифтів у сайт

Сама можливість вбудовувати шрифти для використання на сайті (подібно до того, як ми вбудовуємо зображення або відео) забезпечується мовою стилів CSS, яка відповідає за оформлення всіх елементів на сторінці, у тому числі тексту. Вже ранніх етапах розвитку цієї технології існувала можливість вказати, який шрифт повинен використовуватися відображення тієї чи іншої елемента. Однак при цьому передбачалося, що цей шрифт повинен бути встановлений на комп'ютері користувача. Як варіант «страхування» на випадок відсутності конкретного шрифту - існувала можливість задати кілька шрифтів у порядку «пріоритетності», щоб система послідовно виконала пошук і використовувала перший знайдений варіант зі списку. Такий підхід породив концепцію безпечних для веб-шрифтів(web save fonts) - деякого набору шрифтів, які з великою ймовірністю встановлені на комп'ютерах користувачів, так як, наприклад, входять в комплект постачання ОС або просто користуються великою популярністю.

Статистику «поширення» таких шрифтів можна побачити за допомогою сервісу cssfontstack.com, який також допомагає сконструювати послідовність «страхувальних» шрифтів для кожного з них.

Відповідно, всі можливості веб-друкарні того періоду були зосереджені в десятці шрифтів, які входили до складу «безпечного» набору. Проте з розвитком CSS з'явилася можливість "вбудовувати" шрифти на сайт, тобто. розміщувати файл шрифту разом з іншим вмістом сайту на сервері та посилатися на нього в коді шаблонів для того, щоб він завантажувався браузером під час перегляду сайту і таким чином ставав доступним для використання на комп'ютері користувача. Це досягається за допомогою директиви @font-face, вона підтримується більшістю сучасних браузерів і використовується на дедалі більшій кількості сайтів. Але і при її використанні не слід забувати вказувати «страхувальні» варіанти шрифтів, які можуть бути використані у випадках, коли основний шрифт з якоїсь причини виявився недоступним. Отже, вбудовуємо шрифт, розташований на власному сервері.

1. Знаходимо потрібний шрифт у форматі TTF або OTF, перевіряємо, чи він підтримує потрібну нам мову.
2. Використовуємо генератор Fontsquirrel для конвертації шрифту у різні веб-формати.

1. Завантажуємо створюваний генератором @font-face-пакет, який включає файли шрифтів (їх необхідно розмістити на сервері, разом з іншими елементами шаблону) і заготівлю @font-face правила, яке необхідно розмістити на самому початку файлу стилів на своєму сайті , переконавшись, що шляхи до файлів шрифтів у ньому вказані правильно.

@font-face ( font-family: 'myfont'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#myfont') format('svg '); font-weight: normal; font-style: normal;

2. Вказуємо в стилях, до яких елементів повинен бути використаний вбудований шрифт за допомогою регулярного CSS синтаксису.

Насолоджуємося зробленим ефектом. Можемо також трохи спростити собі завдання використовуючи сторонній сервіс для завантаження шрифтів, наприклад Google Webfonts.

1. Вибираємо шрифт у бібліотеці та перевіряємо, чи підтримує він потрібну мову.
2. У режимі «швидкого використання» вибираємо необхідний нам варіант зображення та набори символів, які необхідно підтримувати. Чим більше варіантів ми захочемо використовувати, тим «важчий» файл шрифту і як наслідок більший час його завантаження. Тому не вибирайте зайвого.
3. Копіюємо код, що генерується системою, і вставляємо його в код шаблону сайту між тегами перед іншими посиланнями на .cssфайли.
4. Вказуємо в стилях, до яких елементів повинен бути застосований вбудований шрифт за допомогою регулярного синтаксису CSS, так само як і в попередньому випадку.

Платою за можливість використання нестандартних шрифтів є падіння продуктивності – сайт довше завантажується, йому потрібно більше обчислювальних ресурсів тощо. Тому не рекомендується використовувати багато нестандартних шрифтів на одній сторінці, а також застосовувати їх до основного тексту, обмежившись окремими елементами дизайну, такими як заголовки або елементи навігації (докладніше про проблему продуктивності при використанні вбудованих шрифтів можна прочитати на Хабре).

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

• Переклад

Зараз час підвищувати рівень дизайну своїх робіт за допомогою веб-шрифтів

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

Свобода використання веб-шрифтів поза безпечним списком на всіх провідних ОС стала можливою за великим рахунком завдяки трьом основним, майже одночасним технологічним факторам: широко поширеній підтримці правила @font-face в браузерах; появі таких «шрифтосховищ» як Typekit та Fontdeck; створення нового формату шрифтів - архівованого файлу шрифту WOFF.

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

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

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

1. Шрифти, які без проблем відобразяться у більшості користувачів.
2. Шрифти, які досить велика група користувачів відсутні.

Якщо дизайнер використовував шрифти другої категорії для створення, наприклад, логотипу або великих статичних заголовків, можна не вагаючись використовувати прийом . Недолік застосування цього прийому – негнучкість. У разі змін у тексті доведеться переробляти картинку та змінювати CSS (наприклад, якщо розміри нової картинки не співпадуть зі старою).

Можна сказати, що небезпека застосування прийому залежить від ймовірності зміни тексту. Тому робити, наприклад, загальний текст сторінки нестандартними шрифтами не можна! Грамотний дизайнер так ніколи не вчинить. А якщо дизайнер попався зелений, гарний верстальник просто зобов'язаний виправити його помилку - у верстці підмінити цей шрифт максимально схожим стандартним.

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

Стандартні шрифти

Стандартні шрифти — це набір шрифтів, що встановлюється разом із операційною системою. Оскільки операційні системи бувають різні, то набір шрифтів у них різний. Список стандартних шрифтів різних версій Windows можна переглянути, наприклад, у статті Стандартні шрифти Windows , а перелік стандартних шрифтів Mac OS на сторінці Шрифти, що постачаються з Mac OS . Що стосується Unix/Linux операційних систем, то єдиний набір шрифтів у них відсутній. Багато користувачів Linux використовують набір шрифтів DejaVu, зокрема на Ubuntu, вони встановлені за замовчуванням. Згідно зі статистикою http://www.codestyle.org, у багатьох Unix/Linux користувачів також встановлені набори шрифтів URW, Free та інші. Згідно з цією ж статистикою, більше 60% користувачів Unix/Linux мають на своєму комп'ютері шрифти набору Core fonts for the Web, який до 2002 був офіційно доступний для безкоштовного скачування на сайті Microsoft.

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

Ця властивість спеціфікує пріоритетний список імен сімейства шрифтів та/або назв родових сімейств. Відповідно до специфікації CSS2 є два типи імен сімейств шрифтів:

1. Ім'я сімейства шрифтів на вибір. Наприклад "Times new Roman", "Arial" та інші. Імена сімейств шрифтів, що містять прогалини, повинні полягати в лапки. Якщо лапки відсутні, будь-які символи пробілу до і після імені шрифту ігноруються, а будь-яка послідовність пробілів усередині імені шрифту конвертується в одиночний пробіл.
2. Родове (загальне) сімейство. У специфікації визначено такі родові сімейства:
   • serif - шрифти із засічками на кінцях;
   • sans-serif - шрифти без засічок;
   • cursive - шрифти курсивного зображення;
   • fantasy – декоративні шрифти;
   • monospace - моноширинний шрифт (з літерами однакової ширини).
   Імена родових сімейств є ключовими словами і не обов'язково повинні полягати у лапки.

Таким чином, для дизайну береться стандартний шрифт з OS Windows, підбирається до нього схожий для Mac OS і Unix/Linux, задається загальна родина шрифтів і готова.

Але не все так просто. Покопаємо докладніше.

У пошуках Web-безпечних шрифтів

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

Окремі шрифти можна назвати безпечними з деякими застереженнями.

Основою визначення «безпечних» шрифтів послужили шрифти найпоширенішої операційної системи Windows, які також використовують у інших ОС. Прикладом такого використання є пакет шрифтів Core fonts for the Web, що вже згадувався, який, згідно зі статистикою, скачало безліч користувачів Unix/Linux.

Цей пакет включає такі шрифти: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Всі вони підтримують кирилицю, що важливо для рунету.

До набору шрифтів, що входять до стандартного постачання Mac OS X (ця ОС має найбільше поширення серед користувачів Mac OS), входять усі шрифти набору Core fonts for the Web.

Таким чином на основі шрифтів Windows, що використовуються в інших ОС, сформувався наступний список так званих «безпечних» Web-шрифтів:

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

Шрифт Webdings містить набір піктограм, тому не може використовуватись для контенту. Andale Mono не отримує широкого застосування, оскільки погано підходить для повсякденного читання тексту з екрана і є не у всіх користувачів Windows.

Всі ці шрифти є у кожного користувача Windows, Mac OS X і переважної більшості користувачів Unix/Linux (тобто у тих, які встановили у себе пакет Core fonts for the Web).

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

Про це читайте у другій частині публікації.

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

P ( font-family: Verdana; )

Цей невеликий шматочок коду означає, що до всіх тегів

Застосовано шрифт Verdana. Властивість font-family встановлює, який шрифт або шрифт буде використовуватися. Коректне відображення цього стилю в браузері користувача залежить від того, чи на комп'ютері встановлено заданий шрифт. У разі, якщо на комп'ютері користувача відсутній шрифт Verdana, браузер відобразить шрифт, встановлений за замовчуванням.

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

P ( font-family: Verdana, " Trebuchet MS " , Geneva, sans-serif; )

Під час обробки цього коду браузер спочатку перевірить наявність шрифту Verdana на комп'ютері користувача. Якщо шрифт присутній, вміст тегів

Відобразиться цим шрифтом. Якщо шрифт відсутній, браузер перевірить наявність наступного списку шрифту – Trebuchet MS. Якщо цей шрифт відсутній, перевірятиметься наявність наступного шрифту – Geneva. Якщо на комп'ютері користувача немає Geneva, браузер вибере інший доступний шрифт без засічок і відобразить текст ним.

Зверніть увагу:у коді ми записали назву шрифту Trebuchet MS у лапках. Потрібно брати назву шрифту в подвійні або одинарні лапки тоді, коли в ньому містяться прогалини.

Про те, що таке шрифт із засічками (serif) та без (sans-serif), ви можете прочитати на сторінці Вікіпедії.

Веб-шрифти

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

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

Отже, для відображення потрібного шрифту у браузері користувача нам необхідно, щоб цей шрифт сам завантажувався на комп'ютер. Здійснити це досить легко. Такий метод підключення шрифтів до CSS відкриває широкі можливості перед дизайнерами. Але варто згадати і про ложку дьогтю в бочці меду: по-перше, не кожен браузер підтримує певний формат шрифту (що призведе до того, що шрифт не відобразиться), а по-друге, якщо файл зі шрифтом має велику вагу, це може сповільнити завантаження сторінки.

Підтримка форматів

Як боротися із проблемою невідповідності формату файлу? Погляньмо на таблицю, де показані найбільш популярні формати шрифтів і дізнаємося, які браузери їх підтримують:

Примітка:актуальну інформацію про підтримку форматів шрифтів ви можете дізнатися на сайті caniuse.com . У рядку пошуку необхідно ввести назву формату (наприклад, ttf).

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

Підключаємо веб-шрифт за допомогою @font-face

Припустимо, ви маєте свій унікальний шрифт під назвою MyUniqueFont у форматі TTF і ви бажаєте, щоб основний текст веб-сторінки відображався саме цим шрифтом. Перше, що потрібно зробити, це скопіювати файл шрифту в папку, де знаходяться всі інші файли сайту. Щоб не створювати безладдя, можна створити окрему папку спеціально для шрифтів, назвавши її, наприклад, fonts .

@font-face ( font-family: MyUniqueFont; src: url("fonts/MyUniqueFont.ttf"); )

Властивість font-family у цьому випадку відіграє іншу роль: за допомогою нього ми присвоюємо ім'я шрифту, щоб потім використовувати це ім'я при написанні стилю:

P ( font-family: MyUniqueFont; )

У другому рядку вказується шлях до файлу шрифту. У нашому прикладі файл MyUniqueFont.ttf знаходиться у папці fonts. У вас URL-адреса може відрізнятися.

Шрифти Google Fonts

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

Примітка:вся колекція шрифтів від Google доступна на сайті Google Fonts. На сторінці можна скористатися різними фільтрами для пошуку шрифтів за категоріями, товщиною, алфавітом.

Нижче описано кожен крок підключення шрифту від Google. Щоб зрозуміти, про що йдеться, виберіть будь-який шрифт зі сторінки Google Fonts і відкрийте його, натиснувши кнопку Quick-use .

Крок 1: виберіть зображення

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

Крок 2: виберіть алфавіт

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

Крок 3: додайте код на сайт

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

...

Другий спосіб – підключення шрифту за допомогою директиви @import. Готовий код знаходиться у другій вкладці пункту 3 на сторінці вибраного Google-шрифту. Його потрібно додати на початок вашої таблиці стилів (інакше файл не імпортується). Виглядає код приблизно так:

@import url(http://fonts.googleapis.com/css?family=Roboto&subset=latin,cyrillic);

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

Крок 4: створіть стиль

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

P ( font-family: "Roboto", sans-serif; )

Якщо на першому кроці ви вибрали кілька варіантів зображення (наприклад, додали варіант жирного шрифту Bold 700), тоді на третьому етапі код трохи видозміниться:

@import url(http://fonts.googleapis.com/css?family=Roboto:700,400&subset=latin,cyrillic);

Щоб потім надати шрифту жирного зображення, запишіть CSS-стиль таким чином:

P ( font-family: "Roboto", sans-serif; font-weight: 700; )

Примітка:в Google Fonts для позначення насиченості шрифту використовуються тільки умовні одиниці від 100 до 900. Так, нормальне зображення (за замовчуванням) еквівалентне значення 400 (normal), а стандартне напівжирне зображення еквівалентно 700 (bold).

Головними перевагами сервісу Google Fonts є:

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

Серед недоліків сервісу – не дуже велика різноманітність шрифтів, особливо кирилиць. До речі, в інтернеті є інші схожі сервіси, наприклад, TypeKit (платний).

Підсумки

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