更改字体样式会更改UI - 标准方法

Question

我使用ul和li标签构建了一个HTML导航条。

<div id="navLimitedLength">
    <ul id="navmenulist">
        <li class="menu"><a>Add</a></li>
        <li class="menu"><a>Update</a></li>
        <li class="menu"><a>View</a></li>
        <li class="menu"><a>Delete</a></li>
    </ul>
</div>

我最初使用CSS将其设置为Arial字体，如下所示：

    li.menu a
    {   
        text-decoration:none;
        font-family:Arial;
        font-size:18px;         
    }

然后我尝试将字体更改为Segoe UI，如下所示：

li.menu a
{   
    text-decoration:none;
    font-family: 'Segoe UI';
    font-size:18px;         
} 

然而，这也会改变菜单的外观，使它们重叠

据我了解，更改字体不应更改其他样式。这可能是因为我在IE8中尝试它。

但是，确保事情保持原状并以理想的方式行事的标准方法是什么。

Answer 1

不同的字体有不同的标准。所以我建议你减少线高。它会解决你的问题。

使用firefox中的firebug调整行高以获得精确的行 - 高度

li.menu a
{
    text-decoration:none;
    font-family: 'Segoe UI';
    font-size:18px;
    line-height:10px; //this value is for sample purpose
}

Answer 2

差异是由不同字体的不同默认行高引起的。根据CSS规范，line-height的初始值为normal，根据规范，浏览器预期“将使用的值设置为'合理'值，具体取决于元素的字体“。如果您检查Firebug中的情况，您可以看到对于18px Arial，使用的值是22px，但对于Segoe UI，它是25px。

在这种情况下，添加例如line-height: 1.2进入样式表会有所帮助。