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

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

我想在Photoshop中创建选择器

---

不过，我不清楚你的最终目标

---

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

不！一种字体是否真的是另一种字体的字体重量是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年中经历了巨大的变化，但它仍然（相对而言）是一种垃圾的排版媒介

我认为你无法从用户的电脑中提取这些信息@字体面字体可以传递此信息。在任何情况下，这都会帮助你：你的意思是你想要字体的宽度…？我的意思是我需要一个可用字体样式的列表。JS中没有这样的字体样式。。。请参阅@PlasticRabbit这是一个疯狂的想法，但您可以在画布上渲染具有不同字体重量的字体，然后将它们保存到base64并比较结果。从理论上讲，如果呈现的字体没有差异，它们将是相等的。Downvoter:你是说我的答案不正确吗？你想验证这个断言，要求澄清吗？