与 CSS 一致的首字母缩进？答案

【问题标题】：Consistent outdent of first letter with CSS?与 CSS 一致的首字母缩进？
【发布时间】：2016-01-15 04:34:47
【问题描述】：

我正在尝试实现正文第一段的第一个字母的缩进。我被困的地方是在第一个字母和段落的其余部分之间保持一致的间距。

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

有人对如何减轻差异有任何想法吗？我更喜欢纯 CSS 解决方案，但如果需要，我会求助于 JavaScript。

PS：我不一定需要兼容 IE 或 Opera

【问题讨论】：

标签： css firefox safari typography

【解决方案1】：

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

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

这会将第一个字母定位在段落的右边缘，然后将其向左或多或少地推动段落的宽度，然后将字母和所有填充都移动到浮动的大负边距中，以便段落适合边缘，不会尝试环绕。

【讨论】：

仅供参考，这似乎在 IE7 中不起作用 :(（但在 ff、safari、opera 和 chrome 中起作用...）
啊，不好意思，但这并不奇怪。考虑到 IE7 的盒子模型是多么古怪和无证之谜，我可能只是将留在 IE7 中的字母浮起来 - 让它切出一个角落。另一种方法是浪费两天时间摆弄，然后最终还是这样做。
当我开始修复它们时，我可能会做一些类似于 IE7 和 8 的原始解决方案的事情。再次感谢！

【解决方案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;
}

【讨论】：

我很好，如果我可以找到与我的正文字体（格鲁吉亚）非常匹配的等宽字体。