Fonts

一般情况我通过 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/uiw-react/…https://github.com/uiw-react/…安装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 <a href="https://github.com/jaywcjlove/svgtofont">open-sourced</a> }}).then(() => { console.log(‘done!’);});;APIsvgtofont 提供 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 Symboloptionssvgtofont(options)distType: String Default value: distsvg 图标路径srcType: String Default value: svg输出到指定目录fontNameType: String Default value: iconfont您想要的字体名称。unicodeStartType: Number Default value: 10000unicode起始编号clssaNamePrefixType: String Default value: font name创建字体类名称前缀，默认值字体名称。cssType: Boolean Default value: false创建CSS / LESS文件，默认为“true”。svgicons2svgfont这是 svgicons2svgfont 的设置svgicons2svgfont.fontNameType: String Default value: ‘iconfont’您想要的字体名称，与前面 fontName 一样。svgicons2svgfont.fontIdType: String Default value: the options.fontName value你想要的字体ID。svgicons2svgfont.fontStyleType: String Default value: ‘‘你想要的字体样式。svgicons2svgfont.fontWeightType: String Default value: ‘‘你想要的字体粗细。svgicons2svgfont.fixedWidthType: Boolean Default value: false创建最大输入图标宽度的等宽字体。svgicons2svgfont.centerHorizontallyType: Boolean Default value: false计算字形的边界并使其水平居中。svgicons2svgfont.normalizeType: Boolean Default value: false通过将图标缩放到最高图标的高度来标准化图标。svgicons2svgfont.fontHeightType: Number Default value: MAX(icons.height)输出的字体高度（默认为最高输入图标的高度）。svgicons2svgfont.roundType: Number Default value: 10e12设置SVG路径舍入。svgicons2svgfont.descentType: Number Default value: 0字体下降。自己修复字体基线很有用。警告：下降是一个正值！svgicons2svgfont.ascentType: Number Default value: fontHeight - descent字体上升。仅当您知道自己在做什么时才使用此选项。为您计算一个合适的值。svgicons2svgfont.metadataType: String Default value: undefined字体 metadata。你可以设置任何字符数据，但它是适合提及版权的地方。svgicons2svgfont.logType: Function Default value: console.log允许您提供自己的日志记录功能。设置为 function（）{} 禁用日志记录svg2ttf这是 svg2ttf 的设置svg2ttf.copyrightType: String版权字符串svg2ttf.tsType: String用于覆盖创建时间的Unix时间戳（以秒为单位）svg2ttf.versionType: Numberfont 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.templateType: String Default value: index.ejs自定义模板可自定义参数。您可以根据默认模板定义自己的模板。{ website: { template: path.join(process.cwd(), “my-template.ejs”) }}website.indexType: String Default value: font-class, Enum{font-class, unicode, symbol}设置默认主页。字体使用假设字体名称定义为 svgtofont，默认主页为unicode，将生成：font-class.htmlindex.htmlsymbol.htmlsvgtofont.csssvgtofont.eotsvgtofont.lesssvgtofont.svgsvgtofont.symbol.svgsvgtofont.ttfsvgtofont.woffsvgtofont.woff2预览demo font-class.html, symbol.html 和 index.html。自动生成样式svgtofont.css 和 svgtofont.less 。symbol svg<svg class=“icon” aria-hidden=“true”> <use xlink:href=“svgtofont.symbol.svg#svgtofont-git”></use></svg>Unicode<style>.iconfont { font-family: “svgtofont-iconfont” !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; -moz-osx-font-smoothing: grayscale;}</style><span class=“iconfont”></span>Class Name支持.less和.css样式引用。<link rel=“stylesheet” type=“text/css” href=“node_modules/fonts/svgtofont.css”><i class=“svgtofont-apple”></i>LicenseLicensed under the MIT License. ...