Шрифти в CSS

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
Піксель px - це сама базова, абсолютна і остаточна одиниця виміру.
Переваги: чіткість і зрозумілість
Недоліки: інші одиниці виміру - є більш потужніші, вони є відносними і дозволяють встановлювати співвідношення між різними розмірами
EM
Вимірюване значення залежить від розміру шрифту поточного елементу (він встановлюється через атрибут розмір шрифту). Коли він явно не заданий використовується розмір тексту який закладений в браузері. Тому 1em спочатку дорівнює розміру шрифту закладеному в браузері за замовчуванням.
EX
Цей аргумент визначається як висота символу «х» в нижньому регістрі. Екс прив'язаний до розміру шрифту заданого в браузері за замовчуванням, якщо у батьківського елементу заданий атрибут «Розмір шрифту» то він прив'язаний до нього.
%
Відсоткові одиниці виміру залежить від розмірів батьківського елементу.
Як правило, за замовчуванням для більшості браузерів
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. Заголовки

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

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

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

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

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

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


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

2 коментарі: