如何获得可用的字体权重？

Question

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

我想在Photoshop中构建选择器。

Answer 1

然而，我不清楚你的最终目标......

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

Answer 2

都能跟得上！一种字体实际上是另一种字体的重量是Javascript无法解决的深奥知识。您可以使用CSS @font-face规则定义 font-family所具有的字体权重，并且在某种程度上说明了实现您所要求的内容的不可能性。

在下面，我已经为一个3个权重的字体设置了一个非常标准的@font-face设置。

@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);
}

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

@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声明中的关系，例如哪个文件与权重，样式和放大器相关联。家庭;已经指定了多少权重...它仍然无法告诉您这些资源是否存在，是否已下载，准确表示相同字体的不同宽度。

Web排版在过去10年中经历了重大变化，但它仍然（相对而言）是一种用于打字的垃圾媒介。