svgtofont.js 自动生成图标字体和彩色图标文件

objc94 发布于2019-08-23 12:04 / 2546人阅读

摘要：使用说明图标字体只能被渲染成单色，不能生成彩色图标。自动生成预览网站，预览字体文件。创建最大输入图标宽度的等宽字体。输出的字体高度默认为最高输入图标的高度。自动生成样式和。

一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。

┌────────┐                                  ┌────────────┐
│iconfont│──┐                               │  Project   │
└────────┘  │  ┌────────────┐  ┌────────┐   │ ┌────────┐ │
            ├─▶│created font│─▶│download│──▶│ │use font│ │
┌────────┐  │  └────────────┘  └────────┘   │ └────────┘ │
│icomoon │──┘                               └────────────┘
└────────┘

使用说明

图标字体只能被渲染成单色，不能生成 彩色图标。

图标将放到平台中维护，下载字体文件到项目中使用，这样团队维护生成字体成本将非常高。

通过图标平台网站下载 svg 图标，将图标放到项目中管理，通过 svgtofont.js 工具来生成它，这将是新的字体图标使用方式：

                                ┌────────────────────┐
                                │      Project       │
                                │                    │
┌────────┐                      │   ┌───────────┐    │
│iconfont│──┐                   │   │    svg    │──┐ │
└────────┘  │  ┌────────────┐   │   └───────────┘  │ │
            ├─▶│download svg│──▶│   ┌───────────┐  │ │
┌────────┐  │  └────────────┘   │┌──│create font│◀─┘ │
│icomoon │──┘                   ││  └───────────┘    │
└────────┘                      ││  ┌───────────┐    │
                                │└─▶│ use font  │    │
                                │   └───────────┘    │
                                └────────────────────┘

新的方式维护方式好处：

不需要知道第三方平台账号维护，将图标下载到项目中维护图标，不再维护字体文件

生成彩色图标文件 SVG Symbol 在项目中使用

svgtofont

读取一组 SVG图标并从SVG图标输出 TTF/EOT/WOFF/WOFF2/SVG 字体，字体生成器。

特性

支持的字体格式：WOFF2，WOFF，EOT，TTF和SVG。

支持 SVG Symbol 文件。

自动生成模板（例如css，less等），可以直接使用。

自动生成预览网站，预览字体文件。

实例

https://github.com/uiwjs/icons

https://github.com/uiwjs/file...

安装

npm i svgtofont

使用

简单的使用方式

const svgtofont = require("svgtofont");
 
svgtofont({
  src: path.resolve(process.cwd(), "icon"), // svg 图标目录路径
  dist: path.resolve(process.cwd(), "fonts"), // 输出到指定目录中
  fontName: "svgtofont", // 设置字体名称
  css: true, // 生成字体文件
}).then(() => {
  console.log("done!");
});

高级用法

const svgtofont = require("svgtofont");
const path = require("path");

svgtofont({
  src: path.resolve(process.cwd(), "icon"), // svg 图标目录路径
  dist: path.resolve(process.cwd(), "fonts"), // 输出到指定目录中
  fontName: "svgtofont", // 设置字体名称
  css: true, // 生成字体文件
  startNumber: 20000, // unicode起始编号
  svgicons2svgfont: {
    fontHeight: 1000,
    normalize: true
  },
  // website = null, 没有演示html文件
  website: {
    title: "svgtofont",
    // Must be a .svg format image.
    logo: path.resolve(process.cwd(), "svg", "git.svg"),
    version: pkg.version,
    meta: {
      description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
      keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG"
    },
    description: ``,
    links: [
      {
        title: "GitHub",
        url: "https://github.com/jaywcjlove/svgtofont"
      },
      {
        title: "Feedback",
        url: "https://github.com/jaywcjlove/svgtofont/issues"
      },
      {
        title: "Font Class",
        url: "index.html"
      },
      {
        title: "Unicode",
        url: "unicode.html"
      }
    ],
    footerInfo: `Licensed under MIT. (Yes it"s free and open-sourced`
  }
}).then(() => {
  console.log("done!");
});;

API

svgtofont 提供 API，可以一个一个的自己生成，也可以自动通过上面方法自动生成

const {
    createSVG,
    createTTF,
    createEOT,
    createWOFF,
    createWOFF2
} = require("svgtofont/src/utils");

const options = { ... };

createSVG(options) // SVG => SVG Font
  .then(UnicodeObjChar => createTTF(options)) // SVG Font => TTF
  .then(() => createEOT(options)) // TTF => EOT
  .then(() => createWOFF(options)) // TTF => WOFF
  .then(() => createWOFF2(options)) // TTF => WOFF2
  .then(() => createSvgSymbol(options)) // SVG Files => SVG Symbol

options

svgtofont(options)

dist

Type: String  
Default value: dist

svg 图标路径

src

Type: String  
Default value: svg

输出到指定目录

fontName

Type: String  
Default value: iconfont

您想要的字体名称。

unicodeStart

Type: Number  
Default value: 10000

unicode起始编号

clssaNamePrefix

Type: String  
Default value: font name

创建字体类名称前缀，默认值字体名称。

css

Type: Boolean  
Default value: false

创建CSS / LESS文件，默认为“true”。

svgicons2svgfont

这是 svgicons2svgfont 的设置

svgicons2svgfont.fontName

Type: String  
Default value: "iconfont"

您想要的字体名称，与前面 fontName 一样。

svgicons2svgfont.fontId

Type: String  
Default value: the options.fontName value

你想要的字体ID。

svgicons2svgfont.fontStyle

Type: String  
Default value: ""

你想要的字体样式。

svgicons2svgfont.fontWeight

Type: String  
Default value: ""

你想要的字体粗细。

svgicons2svgfont.fixedWidth

Type: Boolean  
Default value: false

创建最大输入图标宽度的等宽字体。

svgicons2svgfont.centerHorizontally

Type: Boolean  
Default value: false

计算字形的边界并使其水平居中。

svgicons2svgfont.normalize

Type: Boolean  
Default value: false

通过将图标缩放到最高图标的高度来标准化图标。

svgicons2svgfont.fontHeight

Type: Number  
Default value: MAX(icons.height)

输出的字体高度（默认为最高输入图标的高度）。

svgicons2svgfont.round

Type: Number  
Default value: 10e12

设置SVG路径舍入。

svgicons2svgfont.descent

Type: Number  
Default value: 0

字体下降。自己修复字体基线很有用。

警告： 下降是一个正值！

svgicons2svgfont.ascent

Type: Number  
Default value: fontHeight - descent

字体上升。仅当您知道自己在做什么时才使用此选项。为您计算一个合适的值。

svgicons2svgfont.metadata

Type: String  
Default value: undefined

字体 metadata。你可以设置任何
字符数据，但它是适合提及版权的地方。

svgicons2svgfont.log

Type: Function  
Default value: console.log

允许您提供自己的日志记录功能。设置为 function（）{} 禁用日志记录

svg2ttf

这是 svg2ttf 的设置

svg2ttf.copyright

Type: String

版权字符串

svg2ttf.ts

Type: String

用于覆盖创建时间的Unix时间戳（以秒为单位）

svg2ttf.version

Type: Number

font version string, can be Version x.y or x.y.

website

定义预览Web内容。例：

{
  ...
  // website = null, no demo html files
  website: {
    title: "svgtofont",
    logo: path.resolve(process.cwd(), "svg", "git.svg"),
    version: pkg.version,
    meta: {
      description: "Converts SVG fonts to TTF/EOT/WOFF/WOFF2/SVG format.",
      keywords: "svgtofont,TTF,EOT,WOFF,WOFF2,SVG",
      favicon: "./favicon.png"
    },
    footerLinks: [
      {
        title: "GitHub",
        url: "https://github.com/jaywcjlove/svgtofont"
      },
      {
        title: "Feedback",
        url: "https://github.com/jaywcjlove/svgtofont/issues"
      },
      {
        title: "Font Class",
        url: "index.html"
      },
      {
        title: "Unicode",
        url: "unicode.html"
      }
    ]
  }
}

website.template

Type: String  
Default value: index.ejs

自定义模板可自定义参数。您可以根据默认模板定义自己的模板。

{
  website: {
    template: path.join(process.cwd(), "my-template.ejs")
  }
}

website.index

Type: String  
Default value: font-class, Enum{font-class, unicode, symbol}

设置默认主页。

字体使用

假设字体名称定义为 svgtofont，默认主页为unicode，将生成：

font-class.html
index.html
symbol.html
svgtofont.css
svgtofont.eot
svgtofont.less
svgtofont.svg
svgtofont.symbol.svg
svgtofont.ttf
svgtofont.woff
svgtofont.woff2

预览demo font-class.html, symbol.html 和 index.html。自动生成样式svgtofont.css 和 svgtofont.less 。

symbol svg

Unicode



Class Name

支持.less和.css样式引用。

License

Licensed under the MIT License.

GPU云服务器云服务器字体图标图标字体图标字体库 ico图标在线生成

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97922.html

svgtofont.js 自动生成图标字体和彩色图标文件

摘要：使用说明图标字体只能被渲染成单色，不能生成彩色图标。自动生成预览网站，预览字体文件。创建最大输入图标宽度的等宽字体。输出的字体高度默认为最高输入图标的高度。自动生成样式和。一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体，导入到项目中使用。 ┌────────┐ ┌────────────...

ranwu 2019-08-30 15:54 评论0 收藏0
CSS进阶篇--fontAwesome代替网页icon小图标

摘要：网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标，会显得非常简陋。直接看代码链接链接链接链接得出的结果就是其他应用还有其他更加复杂一点的应用，包括固定宽度浮动反转旋转叠加图标等。引言奥森图标（Font Awesome）提供丰富的矢量字体图标—通过CSS可以任意控制所有图标的大小，颜色，阴影。网页小图标到处可见，如果一个网页都是干巴巴的文字和图片，而没有小图标...

paney129 2019-08-28 18:18 评论0 收藏0
TOB主题2.7版本更新：重做文章主列表、新增菜单图标支持、面包屑、彩色标签、缩略图圆角

摘要：主题版本更新重做文章主列表新增菜单图标支持面包屑彩色标签缩略图圆角支持中文和英文，支持百度收录，适用于各种图片展示网站新闻站电影站美图站资源站等等，扁平化设计公众号展示打赏功能列表无限加载全屏相册展示。TOB主题2.7版本更新：重做文章主列表、新增菜单图标支持、面包屑、彩色标签、缩略图圆角！支持中文和英文，支持百度收录，适用于各种图片展示网站、新闻站、电影站、美图站、资源站等等，扁平化设计、...

rose 2021-09-07 10:12 评论0 收藏0
iconfont的使用方法(更新了一些内容）

摘要：方式和方式是极其相似的，只不过他们一个用的是图标的字体编码，一个用的是图标的引用而已是使用了引用的类名，可在下载的中查看，或者可以在阿里矢量图标库的网站上，进入我的项目查看。字体图标iconfont阿里官网传送门： http://www.iconfont.cn/打开首页的小图标好漂亮哦1）showImg(https://segmentfault.com/img/bVbghOc?w=1...

tianlai 2019-08-23 11:39 评论0 收藏0
使用CSS生成图标

摘要：理解这一点让上边和下边也变成三角形就简单了，将元素的属性设为现在上下左右个边框都是三角形了。实例二制作快进按钮效果为了减少页面的元素，我们可以只提供一个元素实现第个三角形，然后借助的伪类实现第个三角形。有一次笔者在参加前端面试的过程中被面试官问到这样一个问题： BootStrapt里面的图标是怎么样的？用过Bootstrapt的开发者都知道，在Bootstrapt里面有一个图标组件，...

helloworldcoding 2019-08-29 11:18 评论0 收藏0