字体粗细不能正常工作？答案

【问题标题】：font-weight is not working properly?字体粗细不能正常工作？
【发布时间】：2019-12-24 22:55:53
【问题描述】：

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 下不起作用。

【问题讨论】：

你没有问，但是布局非常紧凑，并且试图将 36px h1 塞进 436px 宽的 #header 会导致“Blo/g”以任何缩放倍数在斜线处换行（linux铬）。
您还有几个语法错误和一个标记错误：validator.w3.org/check?uri=http://www.i3physics.com/blog/2010/…
谢谢msw。当我有时间的时候，我会努力的:)

标签： css fonts

【解决方案1】：

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

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

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

那么我将无法使用除 300 以外的任何权重。所有其他权重都将恢复为 300，除非我使用这些额外的权重指定额外的 @font-face 声明。

【讨论】：

如何在一个字体系列下声明多个字体粗细。 ?
@DularaMalindu 您需要复制整个@font-face {...} 块，但在新副本中更改字体文件的粗细和URL（因为通常每个粗细都在单独的文件中）。这有意义吗？

【解决方案2】：

这是因为字体大小 (9px) 太小而无法显示粗体。尝试 11px 或更大，它工作正常。

【讨论】：

【解决方案3】：

大多数浏览器不完全支持font-weight 的数值。 Here's a good article about the problem，虽然它有点老了，但它似乎是正确的。

如果您需要更粗的字体，那么您可能想尝试使用一种比现有字体更粗的字体。当然，您可以调整字体大小以获得类似的效果。

【讨论】：

【解决方案4】：

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

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

【讨论】：

这对我很有用，因为我也在使用谷歌字体！谢谢
导入正确的权重是我的关键。谢谢。

【解决方案5】：

我也遇到了同样的问题，我在选择我正在使用的 Google 字体后解决了这个问题，然后我点击（家庭选择）最小化选项卡，然后点击“自定义”按钮。然后我选择了我想要的字体粗细，然后在我的 html 中嵌入了更新后的链接..

【讨论】：

【解决方案6】：

我删除了text-transform: uppercase;，然后将其设置为bold/bolder，这似乎可行。

【讨论】：

【解决方案7】：

当我将字体样式从 font-family: 'Open Sans', sans-serif; 更改为 Arial 时，对我来说是大胆的工作

【讨论】：