Врезанная в текст буквица
Drop cap (врезанная в текст буквица) – это первая буква абзаца, имеющая больший размер чем остальные, и размещенная так, что её верх находится на уровне первой строки абзаца. На изображении вы можете увидеть пример врезанной в текст буквицы.
Хорошая новость: для того чтобы создать заглавные буквы не нужно применять плагин, все что необходимо это немного css и тег span
. Откройте свой css-файл и добавьте следующий код:
CSS
span.dropcaps {
font-family:Georgia, serif;
color: #ccc;
font-size: 46px;
float: left;
font-weight: 400;
line-height: 1em;
margin-bottom: -0.4em;
margin-right: 0.09em;
position: relative;
}
Как-то так. Конечно, вам понадобится стиль, который бы подходил к вашему дизайну и тексту. Например, значения свойств: font-size
, margins
и line-height
будет необходимо подобрать исходя из вашего дизайна и текста.
Тег Span
Для того чтобы стиль применялся к заглавной букве текста, необходимо «завернуть» заглавную букву в тег span и прописать соответствующий класс.
HTML
<span class="dropcaps">A</span>
Псевдоэлемент :first-letter
Также задать стиль первому символу в тексте можно с помощью псевдоэлемента :first-letter
. Однако к псевдоэлементу :first-letter
можно применять ограниченное количество свойств: это свойства связанные со шрифтом, цветом, фоном, границами, полями и отступами. Еще следует отметить, что псевдоэлемент :first-letter
не будет работать в старых браузерах.
CSS
p:first-letter {
font-family:Georgia, serif;
color: #ccc;
font-size: 46px;
float: left;
font-weight: 400;
line-height: 1em;
margin-bottom: -0.4em;
margin-right: 0.09em;
position: relative;
}
Вот пара методов редактирования заглавных букв с помощью CSS.
Можно добавить и с помощью картинки, но это уже другая тема.