1

添加<sup>or<sub>标记可以消除文本块的行距，我该如何防止这种情况发生？

前

4

2 回答 2

5

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

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

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

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

前：

前

后：

后

资源

于 2013-02-01T01:31:24.530 回答
1

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

除了使用sup，您可以使用，说，<span class=sup>并指定使用上标样式字形，通过设置

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

以及带有浏览器前缀的font-feature-settings.

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

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

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

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

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

于 2013-02-01T09:28:46.050 回答