Question

我注意到一些unicode字符比普通文字高。

E.g。对角线箭头（东北箭头↗，东南箭头...，......），它们在字母顶部声称的空间比普通文本多。

<body style="font-size:48px;">
    <div style="border:1px solid #00ff00;float:left;">
        1-<br>2-<br>3-<br>4-<br>5-<br>6-<br>7-<br>8-<br>9-
    </div>
    <div style="border:1px solid #ff0000;float:left;margin-left:5px;">
        -1<br>-2 &#8599;<br>-3<br>-4 &#8599;<br>-5<br>-6 &#8599;<br>-7<br>-8 &#8599;<br>-9
    </div>
</body>

http://jsfiddle.net/q5LEt/

每次箭头在同一行时，您都可以看到破折号向下移动。

如何避免此行为，例如通过CSS？

Answer 1

您可以通过明确specifying a line-height来避免它：

line-height: 1em;

Answer 2

回答标题中的问题：基本答案是字符不同。 “A”高于“a”，某些特殊字符甚至可以高于“A”。但还有更多。如果混合使用字体，则会有其他变体，因为字体的设计方式不同。例如，Verdana中的“a”比Calibri中的“a”高得多，字体大小相同。

重新编写代码示例和jsfiddle：未声明任何字体系列，因此每个浏览器都将使用其默认值。当我在Firefox上测试时发生的事情是所描述的问题确实发生了，因为“正常”字符来自Times New Roman（常见的默认字体），而箭头字符则没有出现在Times New罗马 - 取自Segoe UI符号。您的里程可能会有所不同，但通常会发生的情况是使用的后备字体（例如Segoe UI Symbol）的默认行高比Times New Roman更高。这会使整个线条占据更多的垂直空间。

所以这个问题与字母的高度没有任何关系;它取决于字体的属性。（好吧，间接有一个连接：像Segoe UI Symbol这样的字体设置了相对较大的默认行高，因为它们包含相当高的字形。）

你可以通过设置line-height来处理这些症状，正如@KonradRudolph建议的那样（尽管1em的值，即设置文本固定，会有点极端，适合特殊情况但不适用正常文本）。

或者，通过选择包含文本中所需字符的字体列表来避免此问题，并使用这样的列表作为其值声明font-family。这意味着箭头和文本的其余部分使用相同的字体，即使出于纯粹的排版原因，这通常也很好。找出字体列表需要一些时间;请参阅我的Guide to using special characters in HTML了解一些提示。

为什么某些Unicode字符比普通文本高？

2 个答案: