css - 覆盖@font-face 中的字体粗细

目前我正在使用 @font-face 并为不支持的浏览器提供后备:

@font-face
{
  font-family: TheSansBlack;
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );
}

font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif;

在某些情况下，回退应该是粗体的，所以我有一些 css 符号，例如:

#foo
{
  font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
}

而且因为我使用的是一种名为 TheSansBlack 的字体，所以不需要设置 font-weight: bold
但这行不通:

@font-face
{
  font-family: TheSansBlack;
  font-weight: normal;
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );
}

它仍然显示看起来丑陋的粗体，因为它与 TheSansBlack 是双粗体...
我只需要在回退时将 font-weight 设置为粗体，而不是 woff 字体。

编辑:我也试过这个没有成功:

@font-face
{
  font-family: TheSansBlack;
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );

  #foo
  {
    font-weight: normal !important;
  }
}

#foo
{
  font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
}

最佳答案

知道了 :-)

我必须在@font-face 中将字体粗细显式设置为粗体。

不知道为什么...

编辑:完整示例

@font-face
{
  src: local( TheSansBlack ), url( ../fonts/TheSans_TT9_.woff ) format( 'woff' );
  font-family: TheSansBlack;
  font-weight: bold;
}

#foo
{
  font-family: TheSansBlack, Arial, Verdana, Helvetica, sans-serif;
  font-weight: bold;
}

这会导致在旧浏览器中出现正常的 TheSansBlack 和粗体 Arial/Verdana/Helvetica。

关于css - 覆盖@font-face 中的字体粗细，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/9974817/