WebGL解决中文字体载入的问题

Other 2015-02-09 WebGL,字体,_typeface_,模型,3D

从写代码开始,中文导致的问题不计其数,本次也不例外。

WebGL里要用中文有两种方式:

一、新建一个Canvas写上中文,然后再添加到WebGL里,优点是不用额外加载特定字体,网页能用什么字体它就能用什么字体,而且只要使用普通DOM Api刷新DOM内容,WebGL里render后就能渲染最新DOM内容,方便调试维护。缺点是这种方式还是2D的方式,没有完全发挥3D的效果。

二、每一个字体都是一个3D模型,优点是完全发挥3D效果可以配合3D实现原理能做出很炫的效果,缺点是这种方式需要额外准备字体模型库,然后还要载入页面中。

这还要分两种情况:

1、静态展示型,这就好办,你需要多少个字就提前做好引入,没有任何问题。

2、动态展示型,展示的字体根据动态数据随时变换,这种情况就要额外处理了,这也是本文讨论的解决方案。

一个中文字体有通常常用的也有五六千个字,有不少网站可以让你把ttf字体转为WebGL里能用的path,但这个过程还是非常痛苦的,转一次耗时非常长,重要的是还不一定能用,可能有bug。测试几个字体文件后,居然发现只有隶书能用,整个字体文件三十多兆

图片超过1M都觉得大了,不要说这个31M的字体文件在网速多快的情况下如何秒下,这是根本不可能的,只能需要另外一种方法来解决。打开lisu_regular.typeface.js文件,内容大部分都是每一个字的path,于是我认为可以把头尾摘出来,然后在需要哪个字体的时候预先向后台请求字体路径再描绘3D。

摘除字体path后的lisu_regular.typeface.js

if (_typeface_js && _typeface_js.loadFace) _typeface_js.loadFace({
	"glyphs":{},
	"cssFontWeight":"normal",
	"ascender":1194,
	"underlinePosition":-59,
	"cssFontStyle":"normal",
	"boundingBox":{"yMin":-255,"xMin":54.25,"yMax":1194,"xMax":1378.046875},
	"resolution":1000,
	"original_font_information":{
		"postscript_name":"LiSu",
		"version_string":"Version 3.01",
		"vendor_url":"",
		"full_font_name":"LiSu",
		"font_family_name":"LiSu",
		"copyright":"(C) Copyright Stone Co., 1996",
		"description":"",
		"trademark":"Trademark of Stone Co., Beijing",
		"designer":"",
		"designer_url":"",
		"unique_font_identifier":"LiSu",
		"license_url":"",
		"license_description":"",
		"manufacturer_name":"",
		"font_sub_family_name":"Regular"
	},
	"descender":-196,
	"familyName":"LiSu",
	"lineHeight":1584,
	"underlineThickness":13
});

摘除后的lisu_regular.typeface.js只有1k大小,与之前的31M相比是不是舒服了很多。

大家看看glyphs默认是一个字体path都没有的

_typeface_js.faces.lisu.normal.normal.glyphs
Object {}

我们向后台请求载入几个字体看看:

我们把请求的数据改写_typeface_,于是_typeface_里就有了这几个字的path

然后再做一些优化,比如要向后台请求字体path之前,先把重复的字给去掉,再把glyphs已存在的字给去掉就ok了

(本文完)

文字链接:《WebGL解决中文字体载入的问题

文章地址:http://www.qttc.net/201502458.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 2

  • 我在这里把中文字体转换成JS格式:http://gero3.github.io/facetype.js/。但用three.js的TEXTGEOMETRY加载字体还是出现问号,显示不出。跪求大神指教!必有重酬!加个qq好吗?848083463
    2015-12-24 22:24:11 [ 跟帖 ]
    1 #
  • 请问有完整的代码参考吗?没找到lisu_regular.typeface.js这个文件
    2015-09-10 18:22:21 [ 跟帖 ]
    2 #
  • 学习一下
    2015-02-11 12:02:50 [ 跟帖 ]
    3 #