Работа с шрифтами и текстовым оформлением в CSS

Для работы с шрифтами и текстовым оформлением в CSS, вы можете использовать различные свойства, которые позволят вам контролировать шрифты, размеры текста, выравнивание и другие аспекты внешнего вида текста на веб-странице. Вот некоторые основные свойства и способы работы с текстом:

1. Изменение шрифта:

/* Изменение шрифта для элементов с классом "custom-font" */
.custom-font {
    font-family: "Arial", sans-serif; /* Установка шрифта Arial или, если он недоступен, любой шрифт без засечек */
}

/* Изменение шрифта для всех заголовков h1 на странице */
h1 {
    font-family: "Helvetica, Arial, sans-serif"; /* Множественный выбор шрифтов */
}

2. Установка размера текста:

/* Установка размера текста для элемента с классом "large-text" */
.large-text {
    font-size: 24px; /* Размер текста в пикселях */
}

/* Установка относительного размера текста для абзацев */
p {
    font-size: 1.2em; /* Размер текста в относительных единицах (1.2 раза больше базового размера) */
}

3. Выравнивание текста:

/* Выравнивание текста в центре для элемента с идентификатором "centered-text" */
#centered-text {
    text-align: center;
}

/* Выравнивание текста по правому краю для всех элементов с классом "right-align" */
.right-align {
    text-align: right;
}

4. Другие стили текста:

/* Подчеркивание текста для ссылок */
a {
    text-decoration: underline;
}

/* Жирное начертание текста для элемента с классом "bold-text" */
.bold-text {
    font-weight: bold;
}

/* Курсив для элементов с классом "italic-text" */
.italic-text {
    font-style: italic;
}

5. Текстовые тени и обводки:

/* Тень текста для элемента с классом "text-shadow" */
.text-shadow {
    text-shadow: 2px 2px 4px #000000; /* Горизонтальное смещение, вертикальное смещение, размытие, цвет */
}

/* Обводка текста для заголовков h2 */
h2 {
    -webkit-text-stroke: 1px #FF0000; /* Толщина и цвет обводки (для браузеров, поддерживающих префикс -webkit-) */
}

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