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

Question

我尝试尽可能写出最好的标题，但我不确定如何准确描述这里发生的事情，所以请随时纠正它。

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

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

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

Answer 1

尝试隔离

span

中的字符，并使用 CSS 属性

line-height

和

font-size

垂直对齐它。

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

参见示例

Answer 2

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

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

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

Answer 3

我总是在这个项目上使用

font-family:Verdana

，它对我有用。