与CSS的第一个字母一致的突出？

I'm trying to implement an outdent of the first letter of the first paragraph of the body text. Where I'm stuck is in getting consistent spacing between the first letter and the rest of the paragraph.

我正在尝试实施正文第一段第一个字母。我被困在哪里是在第一个字母和段落的其余部分之间获得一致的间距。

For example, there is a huge difference in spacing between a "W" and an "I"

例如,“W”和“I”之间的间距存在巨大差异

Anyone have any ideas about how to mitigate the differences? I'd prefer a pure CSS solution, but will resort to JavaScript if need be.

任何人对如何减轻差异都有任何想法?我更喜欢纯CSS解决方案,但如果需要,将使用JavaScript。

PS: I don't necessarily need compatibility in IE or Opera

PS:我不一定需要在IE或Opera中兼容

2 个解决方案

#1

Apply this to p.outdent:first-letter:

将此应用于p.outdent:第一封信:

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

This will position the first letter on the right edge of the paragraph, then shove it left it by more or less the width of the paragraph, then move both the letter and all the padding into the float's large negative margin so the paragraph fits in the margin and doesn't try to wrap around.

这将把第一个字母放在段落的右边缘,然后将它左右推或多或小于段落的宽度,然后将字母和所有填充都移动到浮动的大的负边距中,这样段落适合于保证金并不试图环绕。

#2

I tried using a fix-width font like 'courier new' and since the characters are more or less the same width it made it a lot less noticeable.

我尝试使用像'courier new'这样的固定宽度字体,因为字符的宽度大致相同,所以它使得它更不明显。

Edit - this font is decent but might only work for windows

编辑 - 这个字体很不错,但可能只适用于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;
}