如何使用opentype.js列出OpenType字体特性名?有无更优替代方案?
JS环境获取字体OpenType特性的替代方案
以下方案都可以替代opentype.js实现字体特性列表读取,你可以根据自己的运行场景选择:
- Fontkit
这是目前维护状态最好、适配最全面的字体解析库,同时兼容浏览器端和Node.js环境,不需要手写二进制表解析逻辑。加载字体文件后直接访问font.availableFeatures属性,就能拿到该字体支持的所有4位font-feature标签,还能同步获取每个特性关联的字形替换规则、适用字符范围。
如果你不需要做字形路径绘制、轮廓修改这类重操作,它的解析速度比opentype.js快2倍以上,全量包体积比opentype.js小30%,是目前绝大多数字体处理工具、富文本编辑器字体模块的默认选择,对可变字体、彩色字体的新特性支持也比opentype.js完善。 - Typr.js
主打极致轻量的字体解析库,gzip压缩后体积仅10KB左右,远小于opentype.js,原生支持读取GSUB表内的所有特性标签。适合对前端包体积敏感、只需要读取基础字体特性的场景,缺点是目前维护频率较低,对部分新出的可变字体轴特性、彩色字体特性支持不全,常规的连字、数字样式、小型大写、字偶距这类通用特性读取完全没问题。 - 浏览器原生Local Font Access API
如果你的场景只需要读取用户本地已安装字体的特性,不需要解析远程加载的Web字体,可以用浏览器原生提供的这个API,不需要引入任何第三方依赖。注意这个API目前不会直接返回字体特性列表,你只需要写几十行的轻量二进制解析逻辑,读取字体文件GSUB表的特性记录段即可,不需要加载全量解析代码,整体额外体积可以控制在2KB以内。
该方案的限制是需要用户主动授权字体访问权限,目前仅支持Chromium内核103版本以上的浏览器,不适合面向公网全量用户的普通页面场景,更适合做本地字体管理、排版类工具。
注意:拿到特性标签后不要默认全部开启,大部分字体特性是面向特定排版场景设计的(比如老式数字、小型大写、分数写法),正常排版下只需要默认开启
kern(字偶距)这类基础特性即可,其余特性应该做成配置项供用户按需选择。
内容的提问来源于stack exchange,提问作者Tom
相关产品推荐
相关产品推荐

