/iconfount

离线icon font生成工具

Primary LanguageJavaScriptMIT LicenseMIT

iconfount

iconfount是一个离线icon font生成工具,支持从多个svg文件生成一套字体以及对应的样式文件。

NPM

字体文件兼容性

  1. 桌面端浏览器:IE6+, Safari, FF, Chrome
  2. 移动端浏览器:绝大部分系统都没有问题,部分非常老的安卓系统或者某些古董浏览器可能会有问题。不支持Windows Mobile IE9。

安装

ynpm install -g iconfount or yarn global add iconfount.

第三方依赖

这些依赖是可选的,用到特定选项时才需要安装。

  1. ttfautohint: brew install ttfautohint, hintingtrue的时候需要安装
  2. fontforge: 参见安装fontforge, 图标correct_contour_directiontrue时需要安装

使用

CLI

Usage: iconfount --config file [options]

Options:
  --help        print this message and exit  [boolean]
  -c, --config  config file to read  [required]
  -t, --test    test configuration and exit  [boolean]

API

iconfount(config): buildConfig

  • config - config file to read [required]
  • buildConfig - full config for generate, include svg infos [promise]
const iconfount = require('iconfount')

iconfount('file')

输出文件

├── LICENSE.txt                       版权信息
├── README.txt                        说明文件
├── codes.json                        字符的详细定义,可用于外部工具生成样式代码
├── config.json                       调试用,请忽略
├── css
│   ├── animation.css                 调试用,动画
│   ├── zenticons-codes.css           只包含字符codepoint的css文件
│   ├── zenticons-embedded.css        区别在于WOFF内联了,规避CORS时有用
│   ├── zenticons-ie7-codes.css       IE7专用
│   ├── zenticons-ie7.css             IE7专用
│   └── zenticons.css                 完整的样式,包括font-face以及各个字符的样式
├── demo.html                         预览文件
└── font
    ├── zenticons-db0a845be8.eot      IE专用
    ├── zenticons-db0a845be8.svg      老的Safari专用
    ├── zenticons-db0a845be8.ttf
    ├── zenticons-db0a845be8.woff
    └── zenticons-db0a845be8.woff2

css目录下已经提供了两种样式选择:完整的和只包含字符定义的css。如果仍不能满足需求,可以使用codes.json 文件自己生成样式。

示例

sample目录下提供了一个示例配置。

配置文件

支持json或者js文件,js文件的话直接export一个包含配置信息的对象。

sample/目录下有一个示例配置文件,仅供参考。

doc/目录下有一些文档,对详细理解一些配置有帮助。

参数

name

type: string

required: false

default: 'iconfount'

字体名字,最好英文吧

output

type: string

required: true

输出字体、样式以及示例文件的目录,可以是相对路径或者绝对路径

hinting

type: boolean

required: false

default: false

是否使用ttfautohint对字体文件做hint,需要安装ttfautohint。 建议开启。

units_per_em

type: number

required: false

default: 1000

简单理解为单个svg图标的画板大小,detail 不清楚的话不要设置。

ascent

type: number

required: false

default: 850

从baseline到最高字符顶部的高度, detail 不清楚的话不要设置。

weight

type: number

required: false

default: 400

字体的粗细,和font-weight属性一致

start_codepoint

type: number

required: false

default: 59392, 即0xE800

最小0xE000(57344),最大0xF8FF(63743),这个区间是 Unicode的Private Use Area, 虽然planes 15 and 16也是Private Use Areas,但是我们不支持这两个区间。

glyphs_dir

type: string

required: true

存放svg文件的根目录,如果是相对路径,必须是相对当前配置文件的路径

glyphs

type: Array.<Glyph>

required: true

所有图标的定义,每个图标有如下几个属性.

glyphs.keywords

type: Array.<string>

required: false

default: []

图标的一些tag,主要是描述图标的作用.

glyphs.src

type: string

required: true

图标相对glyphs_dir的路径。

glyphs.css

type: string

required: true

图标的CSS名字,图标最终的class是${meta.css_prefix_text}${css},如果meta.css_use_suffixtrue,图标最终的class是${css}${meta.css_prefix_text}

glyphs.correct_contour_direction

type: boolean

required: false

default: false

是否使用fontforge对字符做轮廓方向修正,需要安装fontforge。 视情况开启,如果生成的字符填充位置不正常,再考虑开启。不过做好是让设计修改原图的路径方向,具体请看 doc/contour-direction.md

meta

type: Object

required: false

一些元数据

meta.author

type: string

required: false

default: ''

字体的作者

meta.license

type: string

required: false

default: ''

字体的许可协议

meta.license_url

type: string

required: false

default: ''

字体许可协议链接

meta.homepage

type: string

required: false

default: ''

字体主页

meta.css_prefix_text

type: boolean

required: false

default: 'icon-'

图标css前缀。

meta.css_use_suffix

type: boolean

required: false

default: false

如果为true, meta.css_prefix_text将被用作css后缀。

meta.columns

type: number

required: false

default: 4

示例页面中每行的列数。

meta.filename_hash

type: boolean

required: false

default: true

是否在文件名中加入随机字符串,确保每次生成的文件名都不同。

License

iconfount's code (all files) is distributed under MIT license. See LICENSE file for details.

Many thanks to the fontello project.