CSS-властивості для шрифтів:

Властивість	Опис	Значення	Приклад запису
font-family	Сімейство шрифта	*Serif* - шрифти з «зарубками» *Sans-serif* - шрифти рубані, *Monospace* - моноширинні шрифти	body {font-family: Verdana, Helvetica, Arial, sans-serif;}
font-style	Стиль шрифта	*Normal* (звичайний) *Italic* (курсивний) *Oblique* (похилий) *Inherit* (наслідування батьківської властивості)	h2 {font-family: "Times New Roman", serif; font-style: italic;}
font-variant	Трансформація букв шрифта в зменшені заголовні букви	*Normal* *small-caps* *inherit*	h1 {font-variant: small-caps;} h2 {font-variant: normal;}
font-weight	Ширина ліній шрифта ("Жирність")	*Normal* (нормальний) *Bold* (жирний) *Bolder* (збільшення жирності) *Lighter* (зменшення жирності) *100* (жирність в числовому значенні) *200* *300* *400* *500* *600* *700* *800* *900* *inherit*	H1{font-family: arial, verdana, sans-serif; font-weight: bold;}
font-size	Розмір шрифта	*xx-small* *x-small* *small* *medium* *large* *x-large* *xx-large* *smaller* *larger* розмір % *inherit*	h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}

Властивість сімейство шрифту FONT-FAMILY

Шрифти з тими чи іншими ознаками, об'єднуються в сімейства. Існує три основні сімейства:

Serif - шрифти з характерними "зарубками", найяскравіший представник - "Times New Roman";
Sans-serif - шрифти рубані, без зарубок, наприклад Arial або Verdana;
Monospace - моноширинні шрифти (з однаковою відстанню між символами, на зразок друкарської машинки), такі як "Courier New";

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

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

Приклад запису:

body {

font-family: Verdana, Helvetica, Arial, sans-serif;

}

Family-name

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

Приклад застосування властивості font-family з зовнішнім підключеням css:

Властивість стиль шрифту FONT-STYLE

Властивість font-style дозволяє виділити текст курсивним, похилим шрифтом або навпаки надати тексту стандартний вигляд. Дану властивість має всього три значення:

normal - стандартний текст, що має звичайне написання, тобто не курсивне і не похиле
italic - курсивне накреслення
oblique - похиле накреслення

Приклад застосування властивості font-style з зовнішнім підключеням css:

Властивість FONT-VARIANT

Ця властивість використовується для вибору варіанту написання букв нижнього регістра. Може приймати два значення:

normal - значення за замовчуванням, текст відображається звичайним чином.
small-caps - букви нижнього регістра відображаються як зменшені заголовні.

Вага шрифту FONT-WEIGHT

Властивість font-weight описує, наскільки товстим, або "важким", має відображатися шрифт. Шрифт може бути normal або bold. Деякі браузери підтримують навіть числові значення 100-900 (у сотнях) для опису ваги шрифту.

Р {font-family: arial, verdana, sans-serif; font-weight: bold;}

Одиниці виміру в css

px, em, %, ex - відносні одиниці, а всі інші - абсолютні.

Піксель px - це сама базова, абсолютна і остаточна одиниця виміру.

Переваги: чіткість і зрозумілість

Недоліки: інші одиниці виміру - є більш потужніші, вони є відносними і дозволяють встановлювати співвідношення між різними розмірами

Вимірюване значення залежить від розміру шрифту поточного елементу (він встановлюється через атрибут розмір шрифту). Коли він явно не заданий використовується розмір тексту який закладений в браузері. Тому 1em спочатку дорівнює розміру шрифту закладеному в браузері за замовчуванням.

Цей аргумент визначається як висота символу «х» в нижньому регістрі. Екс прив'язаний до розміру шрифту заданого в браузері за замовчуванням, якщо у батьківського елементу заданий атрибут «Розмір шрифту» то він прив'язаний до нього.

Відсоткові одиниці виміру залежить від розмірів батьківського елементу.

Як правило, за замовчуванням для більшості браузерів

1em = 12pt = 16px = 100% = medium

Одиниці «px» і «pt», не дуже підходять для веб-документів, так як не масштабуються, що змушує використовувати «em» і "%", які масштабуються, а значить краще підходять для мобільних додатків

Властивість FONT-SIZE

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

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Є одна відмінність у вказаних одиницях виміру: 'px' і 'pt' дають абсолютне значення розміру шрифту, а '%' і 'em' - відносні. Багато користувачів не можуть читати дрібний текст, з різних причин. Щоб зробити web-сайт доступним для всіх, потрібно використовувати відносні значення, такі як '%' або 'em'.

Скорочений запис FONT

Використовуючи скорочений запис font, можна вказувати всі властивості шрифту в одному стильовому правилі.

Наприклад, опис властивостей шрифту для <p>:

p {font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif;}

Скорочений запис:

p {font: italic bold 30px arial, sans-serif;}

Завдання для самостійного виконання:

Створити файл font.html з зовішньою таблицею стилів font.css у якій прописати правила оформлення:
1. Для заголовків:

Н1: колір: синій, розмір шрифта 20px, сімейство шрифта sans serif (приорітетний Arial), стиль шрифта: курсивний
H2: колір: голубий, розмір шрифта: 2em, сімейство шрифта sans serif (приорітетний Helvetica), стиль шрифта: зменшення жирності
H3: розмір шрифта: 100%, сімейство шрифта serif (приорітетний garamound), стиль шрифта: жирний

2. Для абзацу: колір #666666, розмір шрифта 12 px, сімейство шрифта: serif (приорітетний Times New roman), товщина шрифта: normal,
3. Колір фону сторінки: #999999,

Текст для файлу можна скопіювати:

1. Заголовки

Заголовки є одним з найважливіших інструментів для структурування тексту.

1.1 Рекомендації по використанню заголовків і підзаголовків

Ось деякі рекомендації з використання заголовків в HTML-сторінці.

1.1.1 Використання заголовка h1

Якщо в размітці не використовуються теги <section> чи <article>, то не рекомендується, щоб на одній сторінці містилось декілька заголовків верхнього рівня. Всередині тегів <section> і <article> може бути своя ієрархія заголовків.

1.1.2 Використання підзаголовків (h2-h6)

При використанні підзаголовків не рекомендується пропускати рівні заголовків, тобто після заголовка h1 повинен йти підзаголовок h2 і тільки потім підзаголовок h3.

1. Заголовки