initial-letter

/* キーワード値 */
initial-letter: normal;
/* 1 つの値 */
initial-letter: 3; /* 頭文字が 3 行分を占める */
initial-letter: 1.5; /* 頭文字が 1.5 行分を占める */
/* ２ つの値 */
initial-letter: 3 2; /* 頭文字が 3 行分を占め、ベースラインは 2 行目（1 行分上がる） */
initial-letter: 3 1; /* 頭文字が 3 行分を占め、ベースライン変更なし（2 行分上がる） */
/* グローバル値 */
initial-letter: inherit;
initial-letter: initial;
initial-letter: revert;
initial-letter: revert-layer;
initial-letter: unset;

<p class="normal">先頭文字は通常通りです。</p>
<p class="onefive">先頭文字は 1.5 行を占めます。</p>
<p class="three">先頭文字は 3 行を占めます。</p>

.normal::first-letter {
  -webkit-initial-letter: normal;
  initial-letter: normal;
}
.onefive::first-letter {
  -webkit-initial-letter: 1.5;
  initial-letter: 1.5;
}
.three::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}
p {
  outline: 1px dashed red;
}

<p class="four">先頭文字: シンク値 = 4</p>
<p class="same">先頭文字: シンク値は定義されていません（サイズと同じ）</p>
<p class="two">先頭文字: シンク値 = 2</p>
<p class="one">先頭文字: シンク値 = 1</p>

.four::first-letter {
  -webkit-initial-letter: 3 4;
  initial-letter: 3 4;
}
.same::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
}
.two::first-letter {
  -webkit-initial-letter: 3 2;
  initial-letter: 3 2;
}
.one::first-letter {
  -webkit-initial-letter: 3 1;
  initial-letter: 3 1;
}
p {
  outline: 1px dashed red;
}