Просто про складне або вивчаємо CSS3. Частина 4. 1. Шрифти в HTML документі. Властивості font-family і @ font-face

Привіт, шановні читачі сайту remontcompa.ru! Мене звати Роман нахватом і я представляю вашій увазі четверту частину з циклу статей з мови стилів CSS. У цій частині ми з вами вивчимо різні CSS властивості для форматування тексту в HTML документі. Так як форматування тексту в CSS є досить великою темою, четверта частина буде розбита на кілька подчастей. Ні для кого не секрет, що дизайн сайту багато в чому залежить від виду текстової складової на ньому. У мові CSS існує безліч властивостей, призначених для форматування тексту в HTML документі. Дані властивості дозволяють призначати шрифти, колір, кегль, міжрядковий інтервал та інші характеристики для тексту. Наприклад, CSS властивості font-family і @ font-face, які ми сьогодні розглянемо, призначені для роботи зі шрифтами на веб-сторінці.

Просто про складне або вивчаємо CSS3. Частина 4. 1. Шрифти в HTML документі. Властивості font-family і @ font-face

Кожен шрифт по своєму індивідуальний і відрізняється від іншого шрифту своїм зображенням. Але незважаючи на це, шрифти мають між собою і загальні риси. Той або Інною шрифт може відноситися до певного сімейства. Наприклад, шрифт Times New Roman відноситься до сімейства serif (шрифти із зарубками), а шрифт Arial до сімейства sans-serif (шрифти без зарубок). Також існує сімейство monospace (шрифти, що відносяться до даного сімейства, мають символи з однаковою фіксованою шириною), а шрифти сімейства cursive імітують рукописний почерк. У таблиці нижче представлені сімейства шрифтів і деякі представники цих родин

CSS властивість font-family використовується для вказівки шрифту тексту, який буде використаний всередині елемента в HTML документі. Шрифт можна вказати двома способами: Прописавши як значення для властивості font-family назва шрифту (наприклад font-family: arial) Прописавши як значення для властивості font-family назва сімейства, до якого відноситься шрифт (наприклад font-family: serif) При вказівці шрифту за допомогою властивості font-family слід враховувати той факт, що сам веб-браузер не має будь-яких вбудованих шрифтів. Для відображення тексту на веб-сторінці використовуються шрифти, встановлені в операційній системі на комп'ютері користувача. CSS властивість font-family дозволяє в якості значення вказати не один шрифт, а кілька шрифтів, розділяючи їх назви комами. Поширеною практикою є вказувати в кінці списку шрифтів і назва сімейства. Це робиться на випадок, якщо шрифти, зазначені в якості значення для властивості font-family відсутні в операційній системі користувача. При вказівці в якості значення для властивості font-family декількох шрифтів, веб-браузер, зустрівши перший зазначений шрифт, перевіряє, чи встановлений він на комп'ютері користувача. Якщо даний шрифт існує, то веб-браузер використовує його в якості шрифту для елемента на веб-сторінці. Якщо шрифт, вказаний першим в якості значення для властивості font-family не встановлено, то перевіряється другий шрифт і т.д. Якщо жоден із зазначених шрифтів не знайдений, веб-браузер вибирає відповідний шрифт із зазначеного сімейства шрифтів. Створимо HTML документ з наступною структурою і збережемо його на флеш накопичувачі в папці CSS під ім'ям font та розширенням .html

В HTML документі font.html за допомогою тегів

і

створимо два абзаци з будь-яким текстом

Отримаємо наступний вигляд веб-сторінки font.html

Також в папці CSS на флеш накопичувачі збережемо файл стилів fonts.css

Дамо першому і другому абзацу ідентифікатори font1 і font2 відповідно

Використовуючи селектор ідентифікатора, в файлі стилів fonts.css призначимо для тексту першого абзацу шрифти Georgia, Times New Roman, Times прописавши рядок # font1 font-family: Georgia, 'Times New Roman', Times, serif. Можна звернути увагу, що після назв шрифтів вказано їх загальна назва (serif)

отримаємо наступне

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

Шрифти Embedded Open Type (з розширенням .eot) підтримуються тільки в браузері Internet Explorer.

Шрифти TrueType (.ttf) і OpenType (.otf) підтримуються всіма сучасними веб-браузерами. Що стосується підтримки шрифтів TrueType і OpenType веб-браузером Internet Explorer, то з 6-го по 8-ю версію шрифти TrueType і OpenType даними браузером не підтримуються, а 9, 10 і 11 версії Internet Explorer підтримують шрифти TrueType і OpenType лише частково

Шрифти формату Web Open Font (.woff) представляють собою стислу версію шрифтів TrueType або OpenType і підтримуються всіма сучасними веб-браузерами, а також браузером Internet Explorer, починаючи з 9 версії

Шрифти з розширенням .woff2 є останньою версією формату Web Open Font і підтримуються всіма сучасними веб-браузерами, однак жодна версія веб-браузера Internet Explorer не підтримує шрифти з даними розширенням

Шрифти формату Scalable Vector Graphic (.svg) також як і формату TrueType, OpenType і Web Open Font підтримуються сучасними веб-браузерами, в тому числі і на мобільних пристроях

Встановимо для тексту другого абзацу на веб-сторінці font.html який-небудь шрифт, надавши його веб-браузеру в різних форматах. На сайті Google Fonts за адресою https://fonts.google.com представлено понад 800 вільно розповсюджуваних шрифтів, що відносяться до різних сімейств.

Відобразимо на сайті Google Fonts шрифти сімейства serif, поставивши відповідну галочку

Наприклад, для тексту другого абзацу веб-сторінки font.html встановимо шрифт під назвою IM Fell DW Pica SC. Тиснемо на плюсик для вибору даного шрифту

Далі тиснемо кнопку завантажити

Збережемо архів з файлом шрифту IM Fell DW Pica SC на флеш накопичувачі в папці CSS

Розпакувавши скачаний архів, в папці IM_Fell_DW_Pica_SC бачимо файл шрифту IMFePIsc28P

Скачаний файл шрифту має розширення .ttf, тобто це шрифт формату TrueType. Як ми бачили вище, шрифти з розширенням .ttf не підтримуються веб-браузером Internet Explorer. Так як ми хочемо, щоб цей шрифт відображався в будь-якому веб-браузері, нам необхідно перетворити його в інші формати, в тому числі і в формат Embedded Open Type, який підтримується веб-браузером Internet Explorer версій 6-11

Для перетворення завантаженого файлу шрифту IMFePIsc28P.ttf в інші формати перейдемо за адресою https://www.fontsquirrel.com/tools/webfont-generator і тиснемо на кнопку Upload Fonts

Виділяємо скачаний файл шрифту IMFePIsc28P.ttf і тиснемо Відкрити

Ставимо галочку навпроти Yes, the fonts I'm uploading are legally eligible for web embedding, а також встановлюємо перемикач на пункт Expert

Ставимо галочки навпроти форматів, в які хочемо перетворити файл шрифту IMFePIsc28P.ttf

Тиснемо Download Your Kit

Збережемо архів з перетвореним в різні формати шрифтом IM_Fell_DW_Pica_SC на флеш накопичувачі в папці CSS

Зайдемо в папку webfontkit-20190307-050537 і бачимо в ній файли шрифту IM_Fell_DW_Pica_SC з розширеннями .eot, .svg, .ttf, .woff, .woff2. Також нас цікавить файл stylesheet з розширенням .css, в якому відображений код для CSS властивості @ font-face, який ми будемо використовувати для підключення шрифту IM_Fell_DW_Pica_SC в різних форматах до веб-сторінці font.html

CSS властивість @ font-face дозволяє використовувати різні шрифти, навіть якщо вони не встановлені на комп'ютері користувача. Розглянемо css код у файлі stylesheet.css більш докладно. Усередині властивості @ font-face розташоване інше CSS властивість font-family, яке присвоює шрифту ім'я. Ім'я шрифту в подальшому буде використовуватися для вказівки шрифту тексту (в нашому випадку для тексту другого абзацу на сторінці font.html). Властивість src вказує веб-браузеру шлях до файлів шрифту

Скопіюємо CSS код з файлу stylesheet.css і далі вставимо його в файл стилів fonts.css, який підключений до веб-сторінці font.html. отримаємо наступне

Так як на сторінці font.html ми присвоїли другим абзацом ідентифікатор з ім'ям font2, тому в файлі стилів fonts.css, використовуючи селектор ідентифікатора ми призначимо тексту другого абзацу шрифт з ім'ям, яке зазначено в якості значення для властивості font-family, а саме im_fell_dw_pica_scregular

У файлі стилів fonts.css прописуємо рядок # font2 font-family: 'im_fell_dw_pica_scregular'

Для того, щоб текст другого абзацу відобразився шрифтом з ім'ям im_fell_dw_pica_scregular, скопіюємо файли даного шрифту в різних форматах з папки webfontkit-20190307-050537 в папку CSS

отримаємо наступне

Якщо відкрити сторінку font.html в веб-браузері, то можна побачити, що текст другого абзацу відобразився шрифтом IM Fell DW Pica SC