如何获取可用的字体粗细？

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 年里经历了巨大的变化，但（相对而言）它仍然是一种垃圾排版媒介。

Answer 3

您可以使用 CSS 字体加载 API
来实现此目的 必须首先使用 css

@font-face

或 javascript FontFace
将字体加载到您的文档中 这是一个小示例，列出了所有加载字体的字体粗细：

document.fonts.ready.then(() => {
    const weights = {};
    for (const font of document.fonts.values()) {
        if (!weights.hasOwnProperty(font.family)) {
            weights[font.family] = [];
        }
        weights[font.family].push(font.weight);
    }
    console.log(weights);
});