如何使用 opentype.js 从字体中列出 opentype 字体功能名称？答案

【问题标题】：How to list opentype font feature names from a font using opentype.js?如何使用 opentype.js 从字体中列出 opentype 字体功能名称？
【发布时间】：2022-06-14 02:05:56
【问题描述】：

在 JS 环境中，我想列出字体的“字体功能”，以便我可以使用 font-feature-settings css 设置它们。

还有比opentype.js更好的选择吗？

【问题讨论】：

标签： javascript fonts

【解决方案1】：

可以从GSUB 表中提取字体特征。

这是一个简单的示例，列出了来自

的字体特征名称

import opentype from 'opentype.js'

async function listFontFeatures()
{    
    const font = await  opentype.load("C:\\Windows\\Fonts\\arial.ttf");
    const featureNames = [...Array.from(new Set(font.tables.gsub.features.map((f: any) => f.tag)))]

    for (const name of featureNames)        
        console.log(name);
}

listFontFeatures();

这显示了 4 个字符的字体特征代码：

c2sc 考特 ccmp dlig dnom 国际泳联压裂在里面隔离西甲 lnum 本地化中编号号

可以从here查找人类可读的名称

【讨论】：

【解决方案2】：

我创建了一个opentype.features.js npm 包，它在列出字体功能方面比 opentype.js 做得更多。

除了列出功能标签之外，它还列出了功能描述和选项标签。

示例输出：

...,{"tag":"cv13","description":"Cap B-hook alt","options":["Lowercase style"]},...

【讨论】：