如何在CSS中设置超细的“font-weight”（小于100）？

Question

我想让文字超细，小于

font-weight: 100

CSS 可以做到这一点吗？

像这样但使用 Helvetica：

Answer 1

在处理网络字体时，CSS 字体粗细不会“使字体变细”（或粗体）。对于未从 url 加载的字体，

font-weight

值从超细映射到超粗体，但对于自定义字体，粗细是“无论 @font-face 绑定所说的应该是什么”：它们只是在以下情况下使用的区分数字：声明具有多个粗细的字体系列。

以下是使用三种粗细的 Web 字体的 CSS 声明，但请仔细查看字体资源与字体粗细：

@font-face {
  font-family: "Helvetica Neue";
  font-weight: 800;
  src: url(helveticaneue-ultrathin.woff);
}

@font-face {
  font-family: "Helvetica Neue";
  font-weight: 400;
  src: url(helveticaneue-regular.woff);
}

@font-face {
  font-family: "Helvetica Neue";
  font-weight: 100;
  src: url(helveticaneue-ultrathin.woff);
}

这为我们提供了一种 CSS 声明的字体系列，具有三种定义的权重（使用 100、400 或 800 以外的值，将导致未定义的行为）。现在其中两个权重指向相同的字体资源。

以下代码将使用超细字体设置文本样式，即使 CSS 使用粗细 800，这对于预定义字体通常意味着“非常粗体”：

<p style="font-family: 'Helvetica Neue'; font-weight:800">This is thin!</p>

因此，如果您想使用超级细字体：那就去做吧。但这与 CSS font-weight 值无关，而与值 you 在其 @font-face 规则中分配它，然后在您的 font-using-CSS 中使用有关。

Answer 2

显示的字体粗细必须在您选择的字体中可用。如果该集中不存在字体粗细，则无法使用 CSS 选择它。这就是为什么您需要查看您选择的字体中可用的粗细。例如，谷歌字体中列出了此类内容，但字体公司通常会列出可用的粗细，无论它们是免费的还是购买的。

例如，Open Sans 将其最轻的粗细列为 300。如果将其设置为 100，则与将其设置为 300 时不会看到任何不同，因为 100 不存在。

尽管如此，你还是说你想将权重设置为小于 100。但是，小于 100 并不是 CSS 标准的一部分，所以，不，你不能这样做。

Answer 3

您可以在这里找到字体..：https://www.facebook.com/RITCreative/app/208195102528120/

不要希望不可能的字体粗细神奇地变成现实，而是使用 Font Forge 来制作你自己的字体。

您可能想要的是安装在 Mac 上的 Helvetica Nue。

无论如何，请查看 Google 字体并使用过滤器：粗细，就像 Rob 建议的那样。

Answer 4

向文本添加额外的笔画使其比 100 更轻！它并不完美，但解决了我的问题。

.element {
  -webkit-text-stroke: 1px white;
  text-stroke: 1px white;
}

注意：确保

white

属性与您的背景相匹配，否则看起来会更丑。顺便说一下，您可以使用同样的方法使文本比

900

更粗！

Answer 5

用途：

font-weight:"lighter"

你会得到类似的结果。