Доступный путь
Лучше всего посмотреть 5-минутное видео Итана, а затем сослаться на это:
Кроссбраузерный способ (дополнительная разметка)
Просто оберните первый символ абзаца в диапазон, затем настройте диапазон с помощью CSS и удалите стиль.
L orem ipsum dolor sit amet, consectetur adipiscing elit.
.firstcharacter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )Способ CSS3 (без дополнительной разметки)
Задайте первый символ первого абзаца, используя селекторы псевдокласса. Никакой дополнительной разметки не требуется, но нет поддержки IE <9.
Just a normal sentence.
p:first-child:first-letter ( color: #903; float: left; font-family: Georgia; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; )initial-letterпуть
На initial-letterмомент написания этой статьи поддержка браузером была довольно скудной, но ее можно использовать для расчета количества строк, которые должна занимать буква с заглавной буквой, и размера шрифта вместо того, чтобы делать это самостоятельно.
p:first-child:first-letter ( color: #903; font-family: Georgia; initial-letter: 2; )Поддержка браузера
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| Нет | Нет | Нет | Нет | TP * |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Нет | Нет | Нет | 14,0–14,4 * |