Coder Social home page Coder Social logo

fis-command-webfont's Introduction

fis-command-webfont


背景与简介

目前移动端webfont字体使用越来越广泛,由于缺少比较好的自动化工具,开发者在修改字体图标时需要在2个平台进行转换(svg转ttf再转woff2,woff2普遍不支持)才能完成字体生成工作。

经过调研,基于grunt-webfont改造成fis插件,实现一键转换svg图标为svg,oet,ttf,woff,woff2的功能。

由于开源模块大量使用了异步调用,所以暂未改造成fis release 插件,先用command命令来实现自动化需求。

您可以通过第三方平台来了解字体生成与转换过程: https://icomoon.io/app/#/select/fonthttps://everythingfonts.com/#

开始使用

安装插件

执行 npm install -g fis-command-webfont 全局安装

配置插件

在fis-conf.js里面添加配置:

fis.config.set("webfont",{
    'src'       : '/static/fonts/icons',//图标目录
    'dest'      : '/static/fonts',  //产出字体目录
    'fontname'  : 'zuoye_font', //产出字体名称
    'order'     : 'name' //name或者time //图标按名称还是按修改时间排序,默认按名称排序
});

注意:每个图标都会递增生成对应的uinicode,为了避免更新后编码变动,建议icon按字母顺序加前缀并按名称排序

您也可以通过命令行方式传递参数,具体见fis webfont -h

生成字体

在fis模块根目录执行fis webfont即可完成字体转换工作,字体将生成更新到dest目录里(原有同名字体将删除)。

WOFF2问题

WOFF2作为新一代字体标准比woff有明显的优势(大小减小30%),但浏览器支持度低,具体见caniuse

目前woff2的字体转换工具很少,没有相应的npm模块。Google提供的方案也在开发中且不支持windows,如果您想生成woff2字体,需要在本机(mac或linux)安装Google的转换工具:

git clone https://github.com/google/woff2.git
cd woff2
git submodule init
git submodule update
make clean all

注意:编译完之后会在目录内产生woff2_compresswoff2_decompress,请将文件copy到PATH目录(mac上为/usr/local/bin)或者将当前目录添加到PATH中。

如果您不需要产出woff2字体,请在fis-conf.js配置里面添加一项指定产出字体:

types : 'svg,eot,woff,ttf'

fis-command-webfont's People

Contributors

zhangtao07 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

fis-command-webfont's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.