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

【问题标题】：Changing the font style changes UI - standard approach更改字体样式会更改 UI - 标准方法
【发布时间】：2013-01-22 06:47:39
【问题描述】：

我使用 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 中尝试。

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

【问题讨论】：

不同的字体在字母之间有不同的大小，在字母的上方和下方也是如此。这在更改字体时是可以预料的，它们并不统一且完全相同。您应该更改字体大小或行高，或者尝试在lis 之间使用填充和边距。
但是就像每当我改变字体时我也必须提供其他样式属性，这不是感觉有点不标准
在<li>/<a> 和 padding/margin/line-height 上尝试固定高度（至少使用 em/ex 单位）。
使用发布的代码进行测试时看不到该问题。您应该包含实际演示问题的最少代码。想必你已经设置了一些背景颜色、尺寸和display属性设置。

标签： html css stylesheet styling

【解决方案1】：

差异是由于不同字体的默认行高不同造成的。根据 CSS 规范，line-height 的初始值为normal，并且根据规范，浏览器期望“根据元素”。如果你在 Firebug 中查看情况，你可以看到对于 18px Arial，使用的值是 22px，但对于 Segoe UI，它是 25px。

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

【讨论】：

【解决方案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
}

【讨论】：