解读Typr

Typr是Photopea的作者为了他的在线PS工具专门写的JS字体管理框架（这个很腻害），按照他的说法，是opentype的替代品，更加小巧，更加快速，而且支持的格式更多（目前看，就是酱紫，opentype对一些otf支持很不好，而且一旦渲染字体过多就卡），而且支持带颜色的SVG字体文件……

Typr分为两个组成部分：

1、Typr：输出字体各类信息，分成若干个表，主要的其实就是name表，包含字体的所有信息。示例代码如下：

var font = Typr.parse('somefont.ttf');
console.log(font);

ttf/otf格式都支持，注意下返回的font是个object。

2、Typr.U：这个类的东西就有点多了，有的方法其实我也没太弄懂用法。

• Typr.U.codeToGlyph(font, code)：返回字体的整型字符索引，是为了单独输出某些字符用的。
• Typr.U.stringToGlyphs(font, str)：一般比较常用的方法，给出字符串和字体，Typr返回数组格式的图形记录。
• Typr.U.getPairAdjustment(font, gid1, gid2)：返回一对字形的调整参数？？？
• Typr.U.glyphToPath(font, gid)：返回指定字符的矢量路径，也一般用不到
• Typr.U.glyphsToPath(font, gls)：返回输入的字形数组的矢量路径。作者强调了下，需要将返回值转换到像素使用。
• Typr.U.pathToContext(path, ctx)：米有看懂什么意思……
• Typr.U.pathToSVG(path)：适量路径转换为SVG路径格式

下面是官方扩展的一个简单方法的代码，我把注释写一下：

//扩展一个stringToContext方法，目的是传入参数，渲染出该字体的一张图
//参数解读：font-字体；str-字符串；ctx-输出的图片对象；size-字号；color=颜色；xy-字体开始位置

Typr.U.stringToContext = function(font, str, ctx, size, color, x, y)
{
  //获取该字体特定str的glyph信息
  var gls  = Typr.U.stringToGlyphs(font, str);
  //  gls.reverse();  // 如果是从右往左的语言，则需要此命令
  
  //将glyph信息转换为矢量路径
  var path = Typr.U.glyphsToPath  (font, gls);
  //获得缩放比例，字体文件有一个em-square用来标注字符容器的大小，在不同的操作系统中，对该属性的使用不尽相同，可参考http://www.sohu.com/a/305516972_611601中的描述。
  var scale = size / font.head.unitsPerEm;
  
  //缩放内容
  ctx.translate(x,y);  ctx.scale(scale,-scale);
  
  //填充颜色
  ctx.fillStyle = color;
  //将该字体从路径写入到ctx对象中
  Typr.U.pathToContext(path, ctx);
  ctx.fill();
  
  //完成缩放及位移
  ctx.scale(1/scale,-1/scale);  ctx.translate(-x,-y);
}

在官方源代码的demo中，还有对单个字符绘制的一些高级功能和examples，就不一一解读，上面的方法其实就是最常用的。其实对字体文件的解读，就是将ttf或者otf文件按照font的设计方法，将信息一条条拆分出来并转换成对应语言的对象及属性并绘制。以前我一直认为这是C或者C++才能干的事情，以后nodejs才是王道~~

附上Typr的github地址：

https://github.com/photopea/Typr.js

下面是一些有意义的链接：

作者的网站：

https://www.photopea.com

一个解读TTF的python项目：

https://github.com/fonttools/fonttools