解决css3引入中文字体无效问题(中文字体处理工具整合:字体转换、汉字去重复、字体剪裁)

==============2017年12月04日更新===============

之前内容中提到的字体剪裁文件:http://yun.baidu.com/share/link?shareid=4190484354&uk=2187713405&third=0

经过测试发现对于一些中文字体并不能起到剪裁的效果,后来经过多方搜索发现谷歌提供的sfntly中的sfnttool.jar能彻底起到中文字体文件剪裁的目的。具体方法参考:http://blog.csdn.net/github_32626373/article/details/50083731

android的安装:https://www.cnblogs.com/zoupeiyang/p/4034517.html 只需要前两步就可以,安装adk,然后配置环境变量。

ant的安装:http://blog.csdn.net/wanghjbuf/article/details/54773440

==============以下是之前内容===============

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中。但是大家会或多或少的发现,@font-face对英文字符很管用,但是对于中文字符往往会失效。

我通过上网搜索以及自己的失败经验认为,造成这个问题的主要原因就是中文字体太大,基本都是在3M以上,载入速度慢,导致字体效果不显示。

那显而易见,解决这个问题的思路就是减小中文字体的大小。

中文字体之所以大,就是汉字太多。但是大多数汉字可能是我们用不到的,所以我们可以将我们需要的字从字体文件中提取出来,生成小字体文件。

方法就是用这款软件:http://yun.baidu.com/share/link?shareid=4190484354&uk=2187713405&third=0

输入你需要的汉字,点击生成就可以生成你需要的ttf字体小文件了。

然后就可以在网页中用@font-face引用了。

但是考虑到浏览器兼容问题,需要将ttf格式的字体转换成eot svg woff等格式的字体文件,那么推荐一个好用的免费的在线字体转换格式工具: http://www.font2web.com/ 或者搜:FontCreator 下载链接:http://xz6.mqego.com/soft2/fontcreatorhanhua.zip

这还有个ttf转eot的exe软件http://yun.baidu.com/share/link?shareid=4207634902&uk=2187713405&third=0 只要把ttf拖到软件上就可以自动生成eot 存放目录跟ttf文件同步

当然,在我们制作小字体文件的时候可能会有重复的文字,为了进一步精简,可以用这个文件:http://yun.baidu.com/s/1c0hnfZM

不过还是建议没事儿别引用自定义中文字体,如果在文章页引用自定义中文字体,那么就没办法制作小字体文件了。能用默认的就用默认的吧。


未经允许不得转载:前端撸码笔记 » 解决css3引入中文字体无效问题(中文字体处理工具整合:字体转换、汉字去重复、字体剪裁)

上一篇:

下一篇: