与 和 保持一致的行距答案

【问题标题】：Keep consistent line spacing with and 与 和 保持一致的行距
【发布时间】：2013-02-01 17:28:46
【问题描述】：

添加 或 标记会导致文本块的行距消失，我该如何防止这种情况发生？

【问题讨论】：

标签： css

【解决方案1】：

使用 CSS 覆盖默认浏览器样式：

sup, sub
{
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
}

sup { bottom: 1ex; }
sub { top: .5ex; }

请注意，在第 7 版之前，IE 对 vertical-align 的处理在其他浏览器中是唯一的。使用这种方法，我需要 IE 6 及以下版本的下划线破解。

之前：

之后：

Source

【讨论】：

【解决方案2】：

除了@DannyBeckett 的出色回答之外，还有一种完全不同的方法，它可以在工作时产生更好的排版质量——但目前除了现代浏览器中的一些字体（主要是 Microsoft C 字体）之外还不能工作。我希望它在几年内成为一个现实的选择，即使现在在某些条件下它也可以使用。

您可以使用 来代替sup，并通过设置指定使用上标样式的字形

.sup { font-feature-settings: "sups"; }

以及font-feature-settings 的浏览器前缀版本。

Demo 可用。预计它可以在现代 Windows 环境中工作，在其他地方几乎没有。

这仅适用于实际包含此类字形的字体，以使用 OpenType 功能可访问的方式，并且浏览器支持增加但仍然有限。但是当它起作用时，它会使用由创建字体的排版师设计的字形，因此可以期望它们很好地适应字体（但这种期望并不总是得到满足）。

因此，除了消除行间距问题之外，这还有助于解决sup 的实现仅在较高垂直位置使用缩小尺寸的普通字符的问题（这样笔画往往太细，并且为了避免这个问题太大，实现倾向于使用适度的尺寸缩减，所以结果太大了）。

通过@font-face 使用可下载字体在这方面听起来是个好主意。然而，在我测试的谷歌字体中，只有 Source Sans Pro 似乎包含字母的上标字形，并且 a) 使用它作为由谷歌托管由于某种原因无法访问它们，b) 当使用 FontSquirrel 处理时，字形是那里但不知何故扭曲（例如，“h”看起来比“t”高），即使它们在原始 .ttf 文件中似乎没问题。

(使用span而不是sub的原因是，对于后者，您必须将字体大小设置为100％以避免默认大小减小。如果IE没有讨厌的东西，这将是可以的在这种情况下解释百分比错误的错误，与 IE 中元素的默认字体大小有关，而不是与父元素字体大小有关。）

【讨论】：