为什么 › 直角引号 (›) 没有垂直对齐？答案

【问题标题】：Why is the › right angle quote (&rsaquo;) not vertically aligned?为什么 › 直角引号 (›) 没有垂直对齐？
【发布时间】：2016-08-03 18:42:34
【问题描述】：

我尽量把标题写得最好，但我不确定如何准确描述这里发生的事情，所以请随时更正它。

我想使用 › 直角引号 (›) 而不是 > 直角引号 (>)，虽然 › 字符比 > 短，但它位于行底部，类似于句点 ( .)。这使得垂直对齐字符变得困难，当我将它设置为 42px 时，它很明显。

还有其他我可以使用的字符或者我可以垂直对齐的任何方式吗？它可能是我的字体，但我没有使用任何特殊的字体。

这两个字符的示例如下。第一个是 > 常规直角括号，第二个是位于底部的 › 直角括号。

【问题讨论】：

【解决方案1】：

尝试隔离 span 中的字符并使用 CSS 属性 line-height 和 font-size 将其垂直对齐。

此外，标准字体，例如：arial、 verdana 等。默认情况下正确垂直对齐。

【讨论】：

我使用 line-height 玩过孤立的角色，但无法让它工作。在 Arial 中（即使在您的示例中），角色仍然位于底部，在 verdana 中，它更垂直对齐，但也比我想要的更清晰。我想我会尝试找到一种以最佳方式显示它的字体。
与示例中相同的效果也可以简单地使用 padding-bottom:-(x)px; 复制，因为将行高设置为小于字体只会使其看起来垂直对齐。我想避免这种情况，这就是为什么我问为什么它没有垂直对齐，看看我是否可以真正垂直对齐角色而不是欺骗它。我的问题的真正答案很简单，在 Arial 字体中，›符号未垂直对齐。 amphetamachine 在 cmets 中给出了我的问题的正确答案，但不幸的是我不能接受他的回答，因为这是评论。

【解决方案2】：

正如 amphetamachine 已经回答的那样，这取决于您使用的特定字体如何定义字形。

我发现解决此问题的最佳方法（没有硬编码的像素偏移）是将字符放入其自己的跨度中，然后应用：vertical-align: PERCENTAGE%。（在我的例子中 vertical-align: 11% 效果很好，但这取决于字体）。

以百分比表示，即使字体大小不同，它也会保持相同的位置。

【讨论】：