Шрифты и текст. CSS свойства

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

Свойства шрифта

    .font {
        font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
        font-size: 18px;
        font-style: italic;
        font-weight: 700;
    }

  • font-faminy - устанавливает семейство шрифтов, которое будет использовано для отображения текста в документе. Данное свойство наследуется, поэтому чаще всего его указывают в body. Однако есть определенные теги, которые не наследуют данное свойство - например теги форм (input, button, textarea). Список шрифтов указывается через запятую (можно указать имя шрифта или семейство), браузер, начиная с первого значения, проверяет наличие указанного шрифта у пользователя, если все ок - шрифт применяется, если шрифта нет - браузер идет к следующему. Обычно, последнее в списке ключевое слово, описывающее семейство шрифтов — serif (с засечками), sans-serif (без засечек), cursive, monospace (одинаковая ширина каждого символа). Если указанные ранее конкретные шрифты не обнаружены, то будет использоваться шрифт из операционной системы согласно ключевому слову.

  • font-size - определяет размер шрифта элемента ( в px, %, em, rem, ch и .....).

  • font-style - определяет начертание шрифта (обычный - normal, курсивный - italic, наклонный - oblique). Курсив - это шрифт, имитирующий рукописный, наклонный - образуется путем наклона обычных знаков вправо.

  • font-weight - определяет насыщенность шрифта: 100 - thin, 300 - lite, 400 - normal (по умолчанию), 500 - medium, 600 - semibold, 700 - bold, 900 - black.

Свойства оформления текста

    .text {
        color: #f0f0f0;
        text-align: justify;
        text-decoration: line-through;
        text-shadow: 1px 1px 1px #000;
        text-transform: capitalize;
        text-indent: 25px;
        letter-spacing: 3px;
        line-height: 1.67;
        word-spacing: 5px;
        white-space: nowrap;
    }
  • color - oпределяет цвет текста (шестнадцатеричный код, rgb, rgba, hls).
  • text-align - oпределяет горизонтальное выравнивание текста в элементe. Значения: center - по центру, justify - по ширине, чтобы сделать это действие браузер добавляет пробелы между словами, left - Выравнивание текста по левому краю, right - Выравнивание текста по правому краю.
  • text-decoration - определяет оформление текста (подчеркивание, перечеркивание, линии над текстом). Одновременно можно применить более одного стиля, перечисляя значения через пробел. Значения: line-through - перечеркнутый текст, overline - линия проходит над текстом, underline - подчеркнутый текст, none - отменяет все эффекты.
  • text-shadow - добавляет тень к тексту. Пример text-shadow: 1px 1px 1px #000; горизонтальное смещение, вертикальное смещение, размер (необязательный параметр) и цвет (необязательный параметр).
  • text-transform - преобразование текста в заглавные или прописные символы. Значения: capitalize - первый символ каждого слова будет заглавным, lowercase - строчные (нижний регистр), uppercase - прописные (верхний регистр), none - обычное состояние. Также можно создавать комбинации: вид подчеркивания, тип подчеркивания, цвет (underline dotted red - подчеркивание нижней пунктирной линией красного цвета).
  • text-indent - устанавливает величину отступа первой строки блока текста (что-то типа красной строки).
  • letter-spacing - определяет интервал между символами (буквами) по ширине.
  • line-height - устанавливает межстрочный интервал текста (величину пространства между строками).
  • word-break - устанавливает, когда будет совершен переход на новую строку при превышении размеров блока.
  • word-spacing - определяет интервал между словами по ширине.
  • white-space - управляет свойствами пробелов между словами. Применяется в основном со значением nowrap, которое запрещает перенос строки. Значение normal возвращает всё как было.
#fonts #сss
openImgPic