html - 更改字体样式会更改 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

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

在这种情况下，将 eg 添加line-height: 1.2到样式表中会有所帮助。

Answer 2

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

使用 firefox 中的 firebug 调整行高以获得准确的行高

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