目前在写app时遇到ttf文件加载太大了,放本地打包比app还大(差不多了),放服务器加载太慢,于是乎想要看看能不能把这个ttf字体包搞小一点。
首先是加载字体文件的loadFontFace,插件市场也有很好的字体引入插件。但是各种字体文件的通病就是ttf字体包很小的不支持汉字,支持全汉字等的文件比较大(动不动就支持拉丁,日,韩,朝等各种文字,还有各种生僻字,总共5-6万字的字体库)。
后来有人说,这些字体在html中可以这样加载,但是这样加载是不是相当于从字体包中挑出相应的文字重新生成一个文件,这样不能满足我的需求,因为我的文字有新闻类的文章,总不能每次都请求一个字体文件啊(或许这样也可以)。
然后就是类似于阿里icon的在线字体生成,我觉得是不是这样的也许能满足我的需求,直接把汉字常用字生成对应的字体文件,但是发现文字数量有限制,并不现实(某些文本确定的地方这样生成的文件更合适)。
最后,找到了这个将原有字体文件多余文字抽离,精简字体包的方法,精简ttf的方法,按照这个教程,我实现了3500常用字,7600常用字和8000常用字的字体包的生成。
为什么要发这个帖子,效果太显著了,有下面几点,1、我使用的思源宋体,原otf大概23M,精简版ttf只有3M左右(7600字),加载速度大大提升;2、最后的精简字体方法中有坑:首先,FontCreator工具收费,仅有win版,FontSubsetGUI工具仅支持ttf,对于otf支持度不够等;3、最后就是FontSubsetGUI的下载源收费,而且需要.net环境的依赖,各种字体文件大家随便去各种字体网站找一找都有下载的。
##############
刚又发现了,Nvue中引入的字体没有生效,weex引入,loadFontface引入都不行,css引入还是不行oo原来路径的问题啊。比如我的代码‘/static/font/siyuanSimSun.ttf’这个路径,还有就是引入的fontfamily不要用‘string’,倒是和Vue页面内的相反。
var domModule = weex.requireModule('dom');
domModule.addRule('fontFace', {
'fontFamily': "siyuanSimSun",
'src': "url('/static/font/siyuanSimSun.ttf')"
});
##############
刚测试苹果机,注意一下ttf的路径,原安卓的路径(/static/font/siyuanSimSun.ttf)比较随意,倒是iOS相对路径(./static/font/siyuanSimSun.ttf)一定要写准确,也可以转本地绝对路径'src': 'url("'+"file:/" + plus.io.convertLocalFileSystemURL("_www/static/font/siyuanSimSun.ttf")+'")'。
##############
又发现一个问题,之前的环境都是V3引擎,现在我发现关闭V3后Nvue里的字体引入方式失效了,我会重新找方案。
##############
最近把字体的引入搞差不多了,有两个点,V3没有问题,尽量不要在app里引Vue页面的字体,分别引入。Nvue比较好一点,但是不论Nue还是Vue的input,textarea,在安卓端都没办法把内容字体使用指定字体。
##############
本身随笔性质的,也没描述太清楚,既然官方大佬来了,我要把这个字体精简工具放出来,里边有好几个,具体是什么我也不懂,反正按上边的教程,很傻瓜的。
##############
突然发现忘记了一点,我在app.vue里放了一个全局字体
.siyuanSimSun{
font-family: siyuanSimSun; //这里不要带引号
}