在某些浏览器中，粗体字体变得非常宽泛

Question

我知道浏览器以不同的方式呈现字体，特别是粗体字体在所有浏览器中看起来都不同，除非font-weigh设置为normal，但这会阻止我们使用粗体字体。

当我将font-weight: bold;应用于#default_menu元素时，菜单输出在某些浏览器中与其他浏览器相比变得非常宽，并且它有点太多了，而不是1或2像素。< / p>

有没有机会解决这个问题或者至少让它变得更好？

由于

Fiddle Link

HTML

<ul>
    <li><a href="#nogo" title="HOME">HOME</a></li>
    <li class="main_menu_seperator">|</li>
    <li><a href="#nogo" title="HOW IT WORKS">HOW IT WORKS</a></li>
    <li class="main_menu_seperator">|</li>
    <li><a href="#nogo" title="PARTNERS">PARTNERS</a></li>
    <li class="main_menu_seperator">|</li>
    <li><a href="#nogo" title="BLOG">BLOG</a></li>
    <li class="main_menu_seperator">|</li>
    <li><a href="#nogo" title="CONTACT US">CONTACT US</a></li>
</ul>

CSS

#default_menu
{
    font-weight: normal;
}
#default_menu
{
    font-size: 16px;
}
#default_menu ul
{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}
#default_menu li
{
    display: inline;
}
.main_menu_seperator
{
    padding: 0px 10px 0px 10px;
}

Answer 1

检查以下主题。

我希望这是你的问题

Same font except its weight seems different on different browsers

Answer 2

喜欢这个

如果您想要普通字体，请尝试编写font-weight:100;，如果您想要加粗字体，请使用font-weight:600;

<强> demo

<强> CSS

如果您希望在font-weight:normal下面使用not bold selector;

#default_menu
    {
       font-weight:100;/* normal font*/
       font-size: 16px; /*bold font*/
    }

OR

如果您想font-weight:bold，请使用selector

以下

#default_menu
{
font-weight:600;
font-size:16px;
}        

Answer 3

字体取决于浏览器和操作系统。

检查this

font-weight property

font-weight: 400 /* is normal, not 100 */
font-weight: 700 /* is bold, not 600. */