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

Самый простой – обвернуть букву тегом и задать ей стили.

Для начала нам нужно «обернуть» нужную нам букву в самом тексте, т.е. его коде:

<span class="letter">К</span>огда-то

Далее необходимо вставить уже сам CSS код:

@font-face {
font-family: 'Izhitsa';
src: url(/izhitsa.ttf);
}
.letter {
font-family: 'Izhitsa';
color: #f80000;
font-size: 70px;
line-height: 60px;
vertical-align: top;
display: inline-block;
float: left;
margin: 0 10px 0 0;
}

Справка*Благодаря «Color» можно менять цвет буквы; «Font-size» меняет размер, а «Line-height» высоту строки.

Итог:

Выделяем нужную нам букву кодом:

<span class="letter-r">А</span>

Теперь сам CSS код:

.letter-r {
font-size: 0;
display: inline-block;
float: left;
margin: 0 10px 0 0;
width: 80px;
height: 107px;
background: url(https://i.ibb.co/ZLcgpbX/image.png) 0 0 no-repeat;
}

Итог: