在Chrome / Firefox中,Bold太粗犷了

时间:2014-09-21 15:20:07

标签: javascript html css google-chrome firefox

我在Safari中对此进行了测试并且工作正常,但在使用Chrome或Firefox时,粗体是大胆的方式。这是我正在使用的一小段代码: HTML:

<ul>
  <font face="Times New Roman" size="2">
    <li>
      <span>
        Cooly Guy
      </span>
      - 
      <span class="i">
        Human
      </span>
      <br>
      robot, alien, adi, 
      <br>
      yolo, fa 
      <br>
      youtube.com/yt.ID
    </font>
</li>
</ul>

CSS:

#Users span {
    font-weight: bold;
}

#Users2 span {
    font-weight: bold;
}

#Users ul span.i {
    font-style: italic;
}

左侧是Safari,中间是Chrome,右侧是Firefox:http://gyazo.com/219ff996619292b089d2b0866bb4a553

正如您所看到的,与Safari相比,Chrome和Firefox的粗体文字看起来“模糊”。

1 个答案:

答案 0 :(得分:5)

尝试提供数值而不是bold

#Users span{
    font-weight: 600;
}
#Users2 span{
    font-weight: 500;
}

#Users ul span.i{
    font-style: italic;

}

您可以将值从100设置为900

100 : thin
200 : extra-light
300 : light
400 : normal
500 : medium
600 : semi-bold
700 : bold
800 : extra-bold
900 : ultra bold