НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності

CSS Продвинутий

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Підгонка об'єкту CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

Place for your advertisement!
CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Шрифти


Вибір правильного шрифту для вашого сайту - це дуже важливо!


Вибір шрифту - це важливо

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

Правильний шрифт може створити сильну ідентичність для вашого бренду.

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


Загальні сімейства шрифтів

В CSS є п’ять загальних сімейств шрифтів:

  1. Serif шрифти - мають невеличке обведення по краях кожної літери. Вони створюють відчуття формальності та елегантності.
  2. Sans-serif шрифти - мають чисті лінії (без дрібних штрихів). Вони створюють сучасний і мінімалістичний вигляд.
  3. Monospace шрифти - всі літери мають однакову фіксовану ширину. Вони створюють механічний вигляд.
  4. Cursive шрифти - імітують людський почерк.
  5. Fantasy шрифти - це декоративні/гральні шрифти.

Всі різні назви шрифтів належать до одного з загальних сімейств шрифтів.


Відмінності між шрифтами Serif (із засічками) та Sans-serif (без засічок)

Serif vs. Sans-serif

Примітка: Вважається, що на екранах комп’ютерів (або мобільних гаджетів) шрифти без засічок легше читати, ніж шрифти із засічками.


Приклади деяких шрифтів

Generic Font Family Приклади назв шрифтів
Serif Times New Roman
Georgia
Garamond
Sans-serif Arial
Verdana
Helvetica
Monospace Courier New
Lucida Console
Monaco
Cursive Brush Script MT
Lucida Handwriting
Fantasy Copperplate
Papyrus

CSS властивість font-family

В CSS ми використовуємо властивість font-family щоб вказати шрифт тексту.

Властивість font-family має містити кілька назв шрифтів в якості "запасного варіанту" системи, щоб забезпечити максимальну сумісність між браузерами/операційними системами. Почніть перераховувати шрифти із бажаного шрифту і завершіть загальним сімейством шрифтів (щоб браузер міг обрати аналогічний шрифт із загального сімейства, якщо інші вказані шрифти недоступні). Назви шрифтів слід розділяти комами.

ВАЖЛИВО!: Якщо в назві шрифту більше одного слова, вона має бути взята в лапки, наприклад: "Times New Roman".

Приклад

Вкажіть кілька різних шрифтів для трьох параграфів:

.p1 {
  font-family: "Times New Roman", Times, serif;
}

.p2 {
  font-family: Arial, Helvetica, sans-serif;
}

.p3 {
  font-family: "Lucida Console", "Courier New", monospace;
}
Спробуйте самі »

Place for your advertisement!