与CSS的首字母一致?

时间:2008-09-20 04:09:31

标签: css firefox safari typography

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

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

'I' Outdent
'W' Outdent

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

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

2 个答案:

答案 0 :(得分:5)

将此应用于p.outdent:first-letter

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

这会将第一个字母放在段落的右边缘上,然后将它或多或少地拉到段落的宽度,然后将字母和所有填充都移动到浮动的大的负边距中,这样段落适合边缘,不会试图缠绕。

答案 1 :(得分:0)

我尝试使用像'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;
}