【鸿蒙Next】鸿蒙与flutter使用自定义iconfont的ttf字体库对比总结

ttf的iconfont库如何获取

1、自己创建

第一步、 iconfont-阿里巴巴矢量图标库打开网址

第二步、搜索自己的需要的图标、并且加购到购物车

第三步、点击购物车，添加至项目

第四步、添加至项目或者新建项目再添加

第五步、下载至本地

就得到了ttf文件

2、设计同学提供ttf文件

如何引入到项目中

flutter

fonts:
  - family: myIcon  #指定一个字体名
    fonts:
      - asset: fonts/iconfont.ttf

鸿蒙Next

1、在ets中新建目录，取名fonts，将刚才复制的文件粘贴至fonts中。

如：

注意：只要ttf文件也可以的

2、在项目中注册自定义的字体

// 1.注册字体
    font.registerFont({
      familyName:'myFont',
      familySrc:'/fonts/iconfont.ttf'
    })

应用若需全局使用自定义字体，请在EntryAbility.ets文件的onWindowStageCreate生命周期中，通过windowStage.loadContent回调中注册。

使用iconfont自定义字体库

flutter

为了使用方便，我们定义一个MyIcons类，功能和Icons类一样：将字体文件中的所有图标都定义成静态变量：

class MyIcons{
  // book 图标
  static const IconData book = const IconData(
      0xe614, 
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
  // 微信图标
  static const IconData wechat = const IconData(
      0xec7d,  
      fontFamily: 'myIcon', 
      matchTextDirection: true
  );
}

使用

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Icon(MyIcons.book,color: Colors.purple,),
    Icon(MyIcons.wechat,color: Colors.green,),
  ],
)

鸿蒙Next

Text('\ue67f')//引号里的'\u'+编号为官网图片的后四位
  .fontFamily('myFont')//这句话必须加上，不然不显示
  .fontSize(20)

参考：

https://blog.csdn.net/adaedwa187545/article/details/143433707

https://www.jianshu.com/p/5f305f105d89