现状
- CC支持的字体有三种: 系统字体, 动态字体, 位图字体.
-
Canvas渲染 TTF 类型的字体会出现模糊的情况. - 目前在CC中可以使用支持的第三种位图字体解决模糊问题.
将TTF生成MSDF的工具 :
https://github.com/Chlumsky/msdfgen
https://github.com/donmccurdy/msdf-bmfont-web
位图文字使用的 MSDF 算法, 可实现字符放大不失真. 效果非常好, 内存消耗比 Canvas 缩放的方式低 70% 左右.
但是
使用位图文字具有以下优缺点:
- 需要三方创作工具
- 内存使用量没有限制, 尽量重复使用字形
- 不适合字形密集型语言
如果是字母类型的文字就非常完美了, 但是中文使用者的呼声太小了, 并不能引起重视, 所以只处理常用中文字是个比较平衡的解决方案.
另外
使用矢量文字也是一种解决方案
https://github.com/mikolalysenko/vectorize-text
也有将字体转成JS文件的网站: Facetype.js
- 但字体文件大小相比 TTF 几乎翻倍.
- 矢量是个很好的解决方案, 但它带来的一个问题是
CPU不友好. - 可以考虑Cache到
Bitmap的方式进行平衡.
最后
GPU Font Rending
目前来说性能最好, 希望引擎团队调研一下这个方案在引擎中支持的可能性. 或可作为一个可选模块提供.