Шрифти в СSS

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),
шрифти без зарубок (sans-serif),
моноширинні (monospace),
декоративні та рукописні.

MacOS, Linux і Windows містять набір стандартних шрифтів з кожного сімейства. За замовчуванням, якщо жоден інший шрифт не заданий, браузер використовує Times New Roman з сімейства із зарубками (serif).

Подивитися, яким шрифтом відображений текст елемента, можна в інструментах розробника на вкладці Computed.

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

body {
font-family: 'Helvetica Neue', 'Roboto', 'Verdana', 'Tahoma', sans-serif;
}

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

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

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

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

body {
font-family: Verdana, Helvetica, Arial, sans-serif;
}

Family-name

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

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

Нестандартні шрифти

Шрифт допомагає зробити сайт яскравим і незабутнім. Мільйони сайтів з одним шрифтом «Times New Roman» були б, напевно, занадто нудні. Тому дизайнери створюють свої шрифти, а розробники можуть використовувати їх в проектах.

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

Сервіс Google Fonts

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

Скопіюйте та вставте наступний HTML-код у свій файл розмітки і відкрийте сторінку в браузері. Текст, відображений нестандартним шрифтом, нічим не відрізняється, крім зовнішнього вигляду, тому для його оформлення можна використовувати будь-які CSS-властивості.

<html>
<head>
<link
href="https://fonts.googleapis.com/css2?family=Tangerine:wght@700&display=swap"
rel="stylesheet"
/>

<style>
.title {
font-family: 'Tangerine', cursive;
}
</style>
</head>
<body>
<h1 class="title">Making the Web Beautiful!</h1>
</body>
</html>

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

Можна перегортати галерею шрифтів і шукати ті, які сподобалися, або, якщо ім'я шрифту відоме, ввести його в поле пошуку і натиснути на картку шрифту.

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

На вкладці Embed копіюємо тег <link>, в якому вказано посилання на таблицю стилів шрифту, і додаємо її в шапку свого HTML-документа перед іншими стилями.

Тепер у файлі стилів можна використовувати шрифт Tangerine, вказавши його у властивості font-family.

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

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

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

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

See the Pen Font-Style CSS by kravets (@raisa69) on CodePen.

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

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

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

See the Pen Untitled by kravets (@raisa69) on CodePen.

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

Властивість font-weight описує, наскільки товстим, або "важким", має відображатися шрифт. Шрифт може бути normal або bold.

Властивість font-weight може отримувати 15 значень:

initial: Встановлює властивість у значення без задання
inherit: Вказує на спадковість властивості від свого батьківського елемента.
100: Найбільш тонкий.
200: Супер тонкий текст.
300: Тонкий
400: Нормальний.
500: Середній.
600: Напівжирний.
700: Жирний.
800: Супер жирний.
900: Найбільш жирний.
normal: Нормальний шрифт. Значення без задання
bold: Жирні символи.
bolder: Символи товстіші за батьківські.
lighter: Символи тонкіші за батьківські.

Деякі браузери підтримують навіть числові значення 100-900 (у сотнях) для опису ваги шрифту.

See the Pen font-weight css by kravets (@raisa69) on CodePen.

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

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

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

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

Це масштабована одиниця, яка використовується для веб-документів. Один em дорівнює поточному розміру шрифту. Наприклад, якщо розмір шрифту документа 12pt, то 1em дорівнює 12pt. Оскільки em масштабується, 2em дорівнює 24pt, .5em дорівнює 6pt і т.д. Завдяки своїй масштабованості та високій сумісності з мобільними пристроями, em все частіше використовується у веб-документах

Точки зазвичай використовуються в друкованих виданнях (тобто для всього, що друкується на папері). Одна точка дорівнює 1

%

Відсоток багато в чому схожий на em, крім кількох важливих відмінностей. По-перше, поточний розмір шрифту дорівнює 100% (тобто 12pt = 100%). Використання одиниці Відсоток дозволяє вам збільшувати/зменшувати текст для зручності читання.

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

See the Pen em rem vh vw by kravets (@raisa69) on CodePen.

Одиниці «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

See the Pen font-size css by kravets (@raisa69) on CodePen.

Скорочений запис 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;}

1. Створити файл 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

Виконайте всі пункти завдання та порівняйте з результатом. Для пошуку невідомих вам тегів та властивостей використовуйте пошук довідника.
Створіть папку font-task2 створіть новий HTML документ - index.html
У index.html створіть HTML скелет документа
Створіть новий CSS файл - style.css
Підключіть CSS файл до HTML файлу
Створіть заголовок першого рівня у тезі body та напишіть там текст "Оформлення тексту"
Додайте даному заголовку клас title
У CSS файлі у верхівці створіть селектор для тега body і напишіть наступні стилі - шрифт Arial, sans-serif, розмір шрифту 16px, колір тексту #333, міжрядковий відступ 1.5
У CSS файлі створіть селектор для класу title, і напишіть наступні стилі - розмір шрифту 40px, колір тексту #f03333, міжрядковий відступ 1.2, всі літери великі
Після заголовка створіть абзац та напишіть там трохи тексту, можете використовувати сайт-генератор випадкового тексту lipsum.com
Після абзацу створіть заголовок другого рівня, напишіть текст "Заголовок другого рівня" та надайте йому клас subtitle
У CSS файлі створіть селектор для класу subtitle і напишіть наступні стилі - розмір шрифту 30px, колір тексту #12ac11, міжрядковий відступ 1.2, підкреслення тексту знизу
Після заголовка створіть абзац та напишіть там трохи тексту, можете використовувати сайт-генератор випадкового тексту lipsum.com
Після абзацу створіть ненумерований список із трьома пунктами
У кожному пункті напишіть трохи тексту, на свій вибір
Задайте списку клас list
У CSS файлі створіть селектор для класу list, і напишіть наступні стилі - розмір шрифту 20px, колір тексту #444, всі похилі літери, стиль маркерів списку - square
Текст для завдання:

Оформлення тексту

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

Багато програм електронної верстки та редактори HTML використовують Lorem Ipsum як текст за замовчуванням, так що пошук за ключовими словами "lorem ipsum" відразу показує, як багато веб-сторінок все ще чекають свого народження.

За минулі роки текст Lorem Ipsum
Деякі версії зявились помилково
Є багато варіантів Lorem Ipsum

Завдання 3

Диктант по властивостям шрифтів CSS, вихідний код:

See the Pen код для диктанту - шрифти by kravets (@raisa69) on CodePen.

Властивість	Опис	Значення	Приклад запису
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;}