如何使用httpclient作为二进制文件以角度加载字体文件（ttf和otf）以使用opentype.js进行处理

Posted 2023-03-15

【中文标题】如何使用httpclient作为二进制文件以角度加载字体文件（ttf和otf）以使用opentype.js进行处理

【英文标题】：How to load a font file( ttf and otf) in angular using httpclient as binary file to process with opentype.js

【发布时间】：2019-11-11 13:18:39

【问题描述】：

如何使用 httpclient 作为二进制文件以角度加载字体文件（ttf 和 otf）以使用 opentype.js 进行处理。我必须从使用 angular http 模块加载的字体文件中提取 svg 路径。我应该在服务中提到数组缓冲区等文件的类型是什么。

【问题讨论】：

通过使用未压缩的通用系统 OpenType 格式，不要让用户难以加载您的网站。 Use the webfont versions (woff2/woff) instead 以便您的字体更小，这既是由于内置压缩，也是由于丢弃了通用系统字体需要包含的所有数据，而这些数据对于网络使用来说完全没有意义。

Opentype.js 无法解析 otf 和 ttf 以外的其他类型的字体。

这是一个事实上不正确的说法。 OpenType.js 已经支持 woff 超过 2 年了。

【参考方案1】：

在 GET 请求中设置适当的responseType。 https://angular.io/api/common/http/HttpRequest#responseType

this._http
    .get(url,  responseType: 'blob' ) // or 'arraybuffer'
    .subscribe(
        res => 
            // pass reaponse to opentype.js
        
    );