• iconfont应用


    它是一种字体图标, 可以将svg的图像保存以字体的形式保存到ttf中,ttf文件根据对应的unicode和图片资源关联, 通过csv文件维护一份 图片名字和unicode的mapping表和一个ttf格式的字体图标文件, 可以非常方便管理资源, 也不容易出现重复的内容, 一份文件可以支持多个平台使用

    TTF

    • TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式.

    代码中获取字体图标的方式

    • 通过指定 ttf文件路径,ttf的familyName, 以及对应图标的unicode, 就能够获取到对应的字体图标

    生成ttf图标

    1. 获取svg格式的图标,上传自iconfont生成的工具,国内比较好用的是 阿里的iconfont, 此外还有Immon, 根据官方文档提示将svg上传上去,然后下载得到ttf以及对应的 json文件, 将json文件的 iconName和unicode取出, 生成一个简单的映射表

    2. 以下是阿里导入svg后生成的资源列表

      ├── demo.css
      ├── demo_index.html
      ├── iconfont.css
      ├── iconfont.eot
      ├── iconfont.js
      ├── iconfont.json //包含图片名字和字体unicode的json
      ├── iconfont.svg
      ├── iconfont.ttf //字体图标文件
      ├── iconfont.woff
      └── iconfont.woff2
    3. json文件中提取出key-value(imageName-imageUnicode),然后将他们写入到模版dart文件中,和系统图标类似

      class MyCustomIcons {
        MyCustomIcons._();
      static const IconData sleep = IconData(0x7777, fontFamily: 'MyCustomIconsFamily');
      ...
  • 相关阅读:
    DevOps与:cloud,IaC,Container,Microservices, Serverless
    2020年devops的7个发展趋势
    bash极简教程
    Jenkins pipeline jenkinsfile的两种写作方式声明式和脚本式
    Jenkins pipeline之声明式的jenkinsfile
    Linux基本开发环境配置git,c++,nodejs,nginx
    Linux centos8 VPS基本配置之SSH
    DevOps常用工具网址
    DevOps技能自查表
    DevOps的工作岗位的要求
  • 原文地址:https://www.cnblogs.com/wwoo/p/iconfont-ying-yong.html
Copyright © 2020-2023  润新知