爲什麼一些Unicode字符比正常文本高？

我注意到一些unicode字符比正常文本高。爲什麼一些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？

來源

2014-04-25 Pascal Schimkus

我在這裏沒有看到太多的區別http://jsfiddle.net/viphalongpro/q5LEt/3/也許我的眼睛有一些問題。 –

可以通過顯式specifying a line-height避免它：

line-height: 1em;

來源

2014-04-25 12:58:38

重新在標題的問題：基本的答案是，角色是不同的。「A」比「a」高，並且一些特殊字符甚至可以比「A」更高。但還有更多。如果混合字體，則會有其他變體，因爲字體的設計方式不同。例如，Verdana中的「a」比Calibri中的「a」高得多，字體大小相同。

重新編寫代碼示例和jsfiddle：沒有聲明字體系列，因此每個瀏覽器都將使用其默認設置。當我在Firefox上測試時會發生什麼情況，確實發生了問題，因爲「普通」字符取自Times New Roman（通用默認字體），而tehe箭頭字符不出現在Times New羅馬 - 取自Segoe UI Symbol。您的里程可能會有所不同，但通常會發生的情況是使用的後備字體（例如Segoe UI Symbol）的默認行高比Times New Roman的大。這導致整條線路佔據更多的垂直空間。

所以這個問題並不與字母高度無關;它取決於字體的屬性。（好吧，間接是有聯繫的：喜歡的Segoe UI符號字體有比較大的默認的行高度上設置它們，因爲它們含有相當高的字形）

您可以用症狀通過設置line-height通常處理，正如@KonradRudolph所建議的那樣（儘管1em的值，即設置文本固定，會有些極端，適用於特殊情況，但不適合正常文本）。

或者，通過選擇包含文本中需要的所有字符的字體列表來避免該問題，並將font-family這樣的列表作爲它的值聲明。這意味着箭頭和文本的其餘部分採用相同的字體，即使純粹出於印刷原因，這通常也很好。查找字體列表需要一些時間;請參閱我的Guide to using special characters in HTML瞭解一些提示。

來源

2014-04-25 20:47:15

爲什麼一些Unicode字符比正常文本高？

回答

相關問題