在body上定义font-family时,Baseline更高

时间:2015-04-18 14:11:29

标签: css html5 font-face font-family ionicons

今天,当我使用IonIcons时,我发现了一种奇怪的行为。

当正文具有font-family属性时,基线(我是对的吗?它是基线吗?!)更大。

enter image description here

JSFiddle:http://jsfiddle.net/5awcxhnv/

如果从正文中删除font-family属性,则大小非常完美。你知道这种行为的原因吗?

body {
    font-family: Arial;
}

ul {
    list-style:none;
    margin:0;
    padding:0;
    line-height:80px;
    background:yellow;
    overflow:hidden;
    font-size:2em;
}

li {
    display:inline-block;
    float:left;
    padding:0 20px;
}

a {
    display:inline-block;
}

.box {
    width:1em;
    height:1em;
    background:red;
    display:inline-block;
    vertical-align:middle;
}

i {
    background:red;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<ul>
    <li><a href=""><i class="ion-close"></i></a></li>
    <li><a href=""><span class="box"></span></a></li>
</ul>

更新: http://psd-labs.com/demo/ - 我想垂直对齐蓝框中心。我使用vertical-align:center;,但由于正文上的字体,它无效。当我删除字体时,对齐是完美的。

0 个答案:

没有答案