CSS свойство initial-letter

Свойство initial-letter определяет, каким должна быть первая буква и сколько строк должна занять.

Это свойство встречается в газетах, где первая буква больше, чем остальная часть контента.

Свойство имеет следующие значения: normal, <number>, <integer>.

Отрицательные значения недопустимы.

Свойство поддерживается только в Safari.

Значение по умолчанию	normal
Применяется	::first-letter pseudo-elements and inline-level first child of a block container.
Наследуется	Нет
Анимируемое	Нет
Версия	CSS3
DOM синтаксис	Object.style.initialLetter = "<number>";

Синтаксис

initial-letter: normal | <number> | <integer>;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      body {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Slabo 27px';
      font-size: 1.5em;
      line-height: 1.5;
      padding: 40px 0;
      }
      article {
      width: 80%;
      }
      .example::first-letter {
      -webkit-initial-letter: 2;
      initial-letter: 1;
      color: #8ebf42;
      font-weight: bold;
      margin-right: .60em;
      }
    </style>
  </head>
  <body>
    <article class="example">
      Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. 
    </article>
  </body>
</html>

Попробуйте сами!

Значения

Значение	Описание
normal	Первая буква используется без какого-либо эффекта. Значение по умолчанию.
<number>	Указывает размер первой буквы и сколько строк она занимает. Отрицательные значения недопустимы.
<integer>	Указывает сколько строк занимает первая буква.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Значение элемента наследуется от родительского элемента.