html - 如何正确对齐 html/css 中的首字下沉？

Question

好吧，我遇到了以下问题:我需要一个动态解决方案(不知道文本、生成的字体大小等)来正确对齐首字下沉。正确的意思是:首字下沉的 cap-height-line 应该与段落的 cap-height 线相同。

例如:Z Ž Ẑ 应全部对齐其上方的水平条。虽然我看到了这个问题的一些(错误的)解决方案(它们使整体高度对齐，因此在重音、分音符等方面看起来很糟糕)，但我还没有看到任何正确的解决方案。

有人知道吗？

PS:如果我能找到某种方法使首字下沉的基线与段落第二行的基线始终对齐，它可能会起作用，因为从那里可以使用字体的 % 修饰符来完成-尺寸。不幸的是，我也不知道如何存档。

这里有一些东西可以玩:

p.cap {
    text-indent: 0;
    font-size: 125%;
    line-height: 125%;
    text-align: justify;
}

p.cap:first-letter {
    display: inline-block;
    float: left;
    font-size: 230%;
}

http://jsfiddle.net/s856R/

Answer 1

对此的最佳答案是——根据您最终使用的字体系列、字体大小和行高——需要对负边距进行一些摆弄 (gasp) 才能得到 just 对。也就是说，我在这个 fiddle 中看起来很不错:

http://jsfiddle.net/rafegoldberg/zohs9tna/5/

诀窍是重置您的行高，使其与首字下沉字体的大小相匹配，而不是继承其包含段落的行高。所以做这样的事情将实现一致的顶部对齐:

p:first-letter {
    font-size: 230%;
    float: left;
    line-height: 1;
    display: inline-block;
}

This will result in something like this. (抱歉链接到图片；我没有足够的代表发布图片!)但它仍然不完美，因为它与第一行的扩展器而不是文本顶部对齐。要解决此问题，您需要调整 dropcaps 的上边距；尝试使用它，直到您将首字下沉插入以对齐文本顶部，而不是扩展器。您可以使用 outline 和 outine-offset 使其像素完美!

这可能会导致下一行文本下拉。如果发生这种情况，请尝试为 dropcap 添加一个轻微的负底部边距。那应该把线拉回来，你会很高兴的!您的 CSS 看起来与上面完全一样，但多了一行:

p:first-letter {
    /* ... */
    margin: .1em .25em -.5em;
}

With that addition things should now look like this. (PS:我在首字下沉的左右两侧添加了一些边距，因为我认为你会得到更好看的结果!)

同样，这只是需要摆弄才能达到完美的东西。但是一旦你让它与你的特定字体属性(字体系列、大小、行高等)一起工作，它应该可以一致地工作。希望有所帮助；干杯! 🍻