美文网首页
fontCreator使用小结

fontCreator使用小结

作者: kenny_bai | 来源:发表于2018-11-27 00:05 被阅读0次

    由于微信小程序不方便直接使用外部字体库(目前看来是这样),普遍的做法,是使用transfonter,将外部字体,转化成base64格式,然后在wxss中引入该font-face。大致流程梳理成以下两点:

    1.使用transfonter(https://transfonter.org/#),将字体文件上传。

    2.参数选填好后,convert一下。

    3.download下jar包

    4.将jar包解压,将css文件中的font-face拷贝到微信小程序页面的wxss文件中

    上传字体文件,并convert download生成的jar包 解压出的文件结构 将font-face拷贝到微信小程序页面的wxss文件中

    这里遇到一个问题,一般外部的字体库,一般都很大,大多超过10M,这个首先不符合微信的要求,其次,文件过大,导出的font-face的src字段值也会很大。将该font-face内容拷贝到wxss中,会导致文件过大,wxss报错。

    写到这里,解决方案,只能使用自定义字体,用到哪些字,就生成哪些,这样就可以控制字体库的大小了

    fontCreator解决了该问题。

    首先我们来熟悉下fontCreator的简单操作

    首先我们创建一个字体文件file----->new font project

    然后我们通过file------>Open Install font,打开一个现有的字体库

    在主面板上就可以看到打开的幼圆字体了

    然后我们点击新建字符按钮,比如说我们要添加一个中文字符“白”。

    选择ok,就会发现字体文件上多了一个$767D编号的字符了。

    最终参数配置

    在幼圆字体中,使用ctrl+f找到‘白’这个字符,右键copy,选中刚刚新建的$767D的字符,右键粘贴。就可以看到添加成功了

    然后通过export导出成ttf文件,再将ttf文件转化成base64格式等操作,我就不详细赘述了。

    相关文章

      网友评论

          本文标题:fontCreator使用小结

          本文链接:https://www.haomeiwen.com/subject/cqxwqqtx.html