字体粗细无法正常工作？

发布于 2024-09-12 09:58:51 字数 567 浏览 3 评论 0原文

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

这是一个例子。

写着“PHP”的部分（右上角）仍然像以前一样纤细。 CSS代码的一部分，但在FF下不起作用。

.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;
}

这是我尝试过bold、bolder、700、800、900的

原文

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

Here is an example.

The part where it said "PHP" (the right top corner) remained as slim as it was.
here is part of the css code

.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;
}

I tried bold, bolder, 700, 800, 900 and is not working under FF.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

毁梦 2024-09-19 09:58:51

如果您使用的字体不存在这些粗细，则 font-weight 可能无法工作 - 在嵌入自定义字体时您经常会遇到此问题。在这些情况下，浏览器可能会将数字四舍五入到其可用的最接近的权重。

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

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

那么我将无法使用除 400 粗细之外的任何内容。所有其他粗细将恢复为 400。

如果您想要额外的粗细，则需要在单独的 < code>@font-face 声明带有这些额外的权重，就像这样。

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

通常，每种粗细都有一个浏览器需要下载的单独字体文件，除非您使用可变宽度字体。

font-weight can fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.

For example, if I embed the following font...

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

Then I will not be able to use anything other than a weight of 400. All other weights will revert to 400.

If you want additional weights, you need to specify them in separate @font-face declarations with those additional weights, like this.

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Nexa";
    src: url("Nexa-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

Usually each weight will have a separate font file the browser will need to download, unless you're using variable width fonts.

回复收藏 0 原文

夜光 2024-09-19 09:58:51

这是因为字体大小（9px）太小，无法显示粗体。尝试 11px 或更大，效果很好。

回复收藏 0 原文

瑕疵 2024-09-19 09:58:51

大多数浏览器不完全支持 font-weight 的数值。这是一篇关于这个问题的好文章，尽管它有点老了，但它似乎确实是正确的。

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

回复收藏 0 原文

梓梦 2024-09-19 09:58:51

如果您要导入 Google 字体，则需要确保已指定要使用的所有粗细。

就我而言，我使用的是 Google 的 Roboto 字体。我必须使用几个不同的权重导入它，如下所示：

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

请记住，每个额外的权重都会增加每个访问者需要下载的数据量，并且可能会减慢页面的加载速度，因此仅使用必要的权重。

If you're importing a Google font, you need to ensure you've specified all the weights that you would like to use.

In my case, I was using Google's Roboto font. I had to import it with several different weights, like this:

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

Remember that each additional weight increases the amount of data each visitor needs to download, and can slow down the loading of your page, so only use what's necessary.

回复收藏 0 原文