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

我使用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>

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

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

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

但是，这也会改变菜单的外观，使其向下重叠

据我所知，改变字体不应该改变其他样式。这可能是因为我正在IE8中尝试

---

但是什么是标准方法来确保事物保持原位并以所需的方式运行。

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

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

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

---

这种差异是由于不同字体的默认行高不同造成的。根据CSS规范，元素的初始值是

normal

，根据该规范，浏览器应“根据元素的字体将使用的值设置为“合理”值”。如果您检查Firebug中的情况，您可以看到对于18px Arial，使用的值是22px，但是对于Segoe UI，它是25px

---

在这种情况下，将例如

行高：1.2

添加到样式表中会有所帮助。

不同的字体在字母之间、字母上方和下方都有不同的大小。这在更改字体时是意料之中的，因为它们不是统一的，而且都是一样的。你要么改变字体大小或行距，要么在

li

s之间尝试填充和边距。但是，无论何时改变字体，我也必须输入其他样式属性，这不是有点不标准吗？尝试固定高度（至少使用

em

/

ex

unit）在

/

和padding/margin/line-height上。在发布代码的情况下进行测试时，无法看到该问题。您应该包含实际演示问题的最少代码。您可能已经设置了一些背景色、尺寸和

显示

属性设置。