Шрифти CSS: підключення. Веб-шрифти. Google Fonts - підручник CSS

1. Веб-шрифти
2. підтримка форматів
3. Підключаємо веб-шрифт за допомогою @ font-face
4. Шрифти Google Fonts
5. Крок 1: виберіть накреслення
6. Крок 2: виберіть алфавіт
7. Крок 3: додайте код на сайт
8. Крок 4: створіть стиль
9. підсумки

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

p {font-family: Verdana; }

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

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

p {font-family: Verdana, "Trebuchet MS", Geneva, sans-serif; }

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

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

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

Веб-шрифти

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

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

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

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

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

Формат файлу шрифту Які браузери підтримують TTF Підтримують всі браузери, крім: Internet Explorer 8 (і нижче), Opera Mini 5.0-8.0 EOT Підтримує тільки Internet Explorer WOFF Підтримують всі браузери, крім: Internet Explorer 8 (і нижче), Opera Mini 5.0- 8.0, Android Browser 4.1-4.3 SVG Chrome до версії 37 (включно), Safari, iOS Safari, Android Browser

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

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

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

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

Далі нам необхідно дати команду браузеру завантажити шрифт MyUniqueFont. Записується це за допомогою директиви @ font-face наступним чином:

@ 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 Fonts

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

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

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

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

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

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

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

Далі Google пропонує підключити шрифт одним з декількох способів: або стандартним, або через директиву @import, або за допомогою JavaScript. Ми розглянемо перші два варіанти.

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

<Head> <link href = 'http: //fonts.googleapis.com/css? Family = Roboto & subset = latin, cyrillic' rel = 'stylesheet' type = 'text / css'> ... </ head>

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

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

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

Скріншот: етапи настройки шрифту Google

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

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

p {font-family: 'Roboto', sans-serif; }

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

<Link href = 'http: //fonts.googleapis.com/css? Family = Roboto: 700,400 & subset = latin, cyrillic' rel = 'stylesheet' type = 'text / css'>

або:

@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.

Наступна подглави - про кольорі тексту в CSS і способах представлення квітів .