font-weight工作不正常？

Question

http://www.i3physics.com/blog/2010/07/dsfsdf/

这是一个例子.

它说"PHP"(右上角)的部分依然保持苗条.这是css代码的一部分

.wp_syntax_lang {
  background-color:#3c3c3c;
  position:absolute;
  right:0;
  padding:1px 10px 3px;
  color:#ddd; font-size:9px; font-weight:800;
  text-transform:uppercase;
  -moz-border-radius-bottomleft:5px;
  -webkit-border-bottom-left-radius:5px;
  border-radius-bottomleft:5px;
}

我尝试了大胆,大胆,700,800,900,并且没有在FF下工作.

Answer 1

这是因为字体大小(9px)太小而不能显示粗体.尝试11px或更多,它工作正常.

Answer 2

大多数浏览器都不完全支持数值font-weight. 这是一篇关于这个问题的好文章,即使它有点老了,它似乎也是正确的.

如果你需要更大胆的东西,那么你可能想尝试使用比现有字体更大的不同字体.当然,您可以调整字体大小以获得类似的效果.

Answer 3

就我而言，我使用的是 Google 的 Roboto 字体。所以我不得不在我的页面的开头以适当的权重导入它。

<link href = "https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel = "stylesheet" />

Answer 4

font-weight如果您使用的字体没有那些权重,也可能无法工作 - 在嵌入自定义字体时,您经常会遇到这种情况.在这些情况下,浏览器可能会将数字四舍五入到它可用的最接近的权重.

例如,如果我嵌入以下字体...

@font-face {
    font-family: 'Nexa';
    src: url(...);
    font-weight: 300;
    font-style: normal;
}

然后我将无法使用除300之外的任何重量.除非我@font-face使用这些额外的权重指定其他声明,否则所有其他权重将恢复为300 .