fis3-command-webfont

Auto convert svg font to eot,svg,woff,ttf and output css style by using fis3

Usage no npm install needed!

<script type="module">
  import fis3CommandWebfont from 'https://cdn.skypack.dev/fis3-command-webfont';
</script>

README

fis3-command-webfont


背景与简介

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

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

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

开始使用

安装插件

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

配置插件(也可通过命令行来配置)

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


fis.config.set("webfont",{
    src       : 'fonts/*.svg',//或['./fonts/home2.svg', './fonts/home3.svg']
    dest      : './fonts/compile',  //产出字体目录

    order     : 'name', //name或者time //图标按名称还是按修改时间排序,默认按名称排序
    hashes    :  false,//是否增加时间戳
    syntax    : 'bootstrap',//输出样式模板, boostrap or reasy
    types     : 'eot,svg,woff,ttf'//输出字体
});

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

命令行

fis3 webfont -r **.svg -d ./fonts/ -n iconfont

  • -r 指定需要转化的svg字体
  • -d 指定输出目录
  • -n 指定输出字体名称

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

types : 'eot,svg,woff,ttf'

关于XP下<=IE8的兼容性问题

grunt-font已经明确将不再对ie8及以下进行完全兼容,所以生成字体在ie8及以下可能会出现无法显示的情况。 现已知**XP下的IE8在服务器环境下**可能无法显示webfont, 需要兼容IE8的可以尝试加上respond.js以及html5shiv.js来解决。