Последовательный отступ первой буквы с помощью CSS?

Question

Я пытаюсь реализовать отступ первой буквы первого абзаца основного текста.Я застрял в обеспечении одинакового расстояния между первой буквой и остальной частью абзаца.

Например, существует огромная разница в расстоянии между буквами «W» и «I».

Есть ли у кого-нибудь идеи о том, как смягчить различия?Я бы предпочел чистое решение CSS, но при необходимости прибегну к JavaScript.

ПС:Мне не обязательно нужна совместимость с IE или Opera.

Answer 1

Примените это к p.outdent:first-letter:

margin-left: -800px;
padding-right: 460px;
float: right;

Это поместит первую букву на правый край абзаца, затем сдвинет ее влево примерно на ширину абзаца, затем переместит букву и все отступы в большое отрицательное поле плавающего элемента, чтобы абзац поместился в маржа и не пытается обернуться.

Answer 2

Я попробовал использовать шрифт фиксированной ширины, например «courier new», и, поскольку символы имеют более или менее одинаковую ширину, это сделало его намного менее заметным.

Изменить — этот шрифт приличный, но может работать только для Windows.

p.outdent:first-letter {
    font-family: ms mincho;
    font-size: 8em;
    line-height: 1;
    font-weight: normal;
    float: left;
    margin: -0.1em 0 0 -.55em;
    letter-spacing: 0.05em;
}