javascript - 如何获得可用的字体粗细？

Question

有没有办法在 JavaScript 中获取特定字体的权重列表？

我想像在 Photoshop 中那样构建选择器。

Answer 1

但是，我不清楚您的最终目标....

如果您使用的是谷歌字体之类的东西，您应该已经知道所有可能的权重。换句话说，如果您提供自己的字体，那么您就是所有可用字体的主人。

Answer 2

没有！一种字体是否实际上是另一种字体的字体粗细是 Javascript 无法解决的深奥知识。您可以使用 CSS 规则定义字体系列具有的字体权重@font-face，并以这种方式说明实现您所要求的不可能。

在下面，我有一个非常标准@font-face的字体设置，具有 3 个粗细。

@font-face {
  font-family: Barney;
  src: url(barney_regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: Barney;
  src: url(barney_light.ttf);
  font-weight: 300;
}

@font-face {
  font-family: Barney;
  src: url(barney_bold.ttf);
  font-weight: 500;
}

但是知道这些.ttf文件中的每一个都代表同一字体系列的不同权重是任意的。在这里我已经指定了它，因为我知道它。如果一个自动化服务，例如 Font Squirrel，获取了这 3 个文件，它可能会出现这样的结果：

@font-face {
  font-family: barney_regular;
  src: url(barney_regular.ttf);
}

@font-face {
  font-family: barney_light;
  src: url(barney_light.ttf);
}

@font-face {
  font-family: barney_bold;
  src: url(barney_bold.ttf);
}

在这里，这 3 个权重实际上都被指定为不同的字体系列，这显然是一个错误。但理论上我可以做更愚蠢的事情：

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 500;
}

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 400;
}

@font-face {
  font-family: barney;
  src: url(barney_regular.ttf);
  font-weight: 300;
}

上面，相同的字体被分配了 3 种不同的权重。因此，即使 Javascript 可以检测到@font-face声明中的关系，例如什么文件与什么重量、样式和系列相关联；指定了多少权重……它仍然无法告诉您这些资源是否存在，是否已下载，准确地表示相同字体的不同宽度。

网页排版在过去的 10 年里发生了很大的变化，但它仍然（相对而言）是一种垃圾排版媒介。