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

Question

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

我想要构建像Photoshop中的选择器。

- Plastic Rabbit

---

我认为您无法从用户计算机中提取该信息。@font-face字体可以传递此信息。无论如何，这应该会帮助您：http://www.w3.org/TR/CSS2/fonts.html#font-boldness - elclanrs

你的意思是想要字体的宽度吗...？ - Prasath K

JS中没有这样的字体样式...请参见http://www.w3schools.com/jsref/prop_style_fontweight.asp - Prasath K

@PlasticRabbit 这是一个疯狂的想法，但你可以在画布上渲染不同字重的字体，然后将它们保存为base64并比较结果。理论上，如果渲染的字体没有差异，则它们的base64将相等。 - ant_Ti

这里还有另一个尝试 JS/CSS 字体检测器。 - PHearst

Answer 1

我不确定您的最终目标，但是......

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

- Renee Rose-Perry

Answer 2

不行！一个字体是否是另一个字体的字重是深奥的知识，Javascript 无法解决这个问题。你可以使用 CSS @font-face 规则来定义字体族中有哪些字重，并且从某种程度上来说，这说明了你所要求的是不可能实现的。

下面是一个拥有 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;
}

上面的例子中，完全相同的字体被分配到了三个不同的字重。因此，即使Javascript可以检测@font-face声明中的关系，例如哪个文件与哪个字重、样式和字族相关联；有多少个字重已经被指定...... 它仍然无法告诉您这些资源是否存在，是否已经下载，是否准确地表示了同一字体的不同宽度。

Web排版在过去10年中经历了巨大的变化，但相对而言，它仍然是一个糟糕的排版媒介。

- Barney

---

Downvoter：你是在说我的回答不正确吗？能否验证一下这个断言，或者请问需要澄清什么？ - Barney

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

- Romain