| 非常方便的将 SVG 图标生成 TTF/EOT/WOFF/WOFF2/SVG 字体 | 您所在的位置：网站首页 › svg字体右移 › 非常方便的将 SVG 图标生成 TTF/EOT/WOFF/WOFF2/SVG 字体 |
非常方便的将 SVG 图标生成 TTF/EOT/WOFF/WOFF2/SVG 字体
|
一般情况我通过 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/icons https://github.com/uiw-react/file-icons 简单的使用方式 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!'); });; 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 Symbol optionssvgtofont(options) distType: String Default value: dist svg 图标路径 srcType: String Default value: svg 输出到指定目录 fontNameType: String Default value: iconfont 您想要的字体名称。 unicodeStartType: Number Default value: 10000 unicode起始编号 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 字体上升。 仅当您知道自己在做什么时才使用此选项。 为您计算一个合适的值。 svgicons2svgfontadataType: String Default value: undefined 字体 metadata。 你可以设置任何 字符数据，但它是适合提及版权的地方。 svgicons2svgfont.logType: Function Default value: console.log 允许您提供自己的日志记录功能。 设置为 function（）{} 禁用日志记录 svg2ttf这是 svg2ttf 的设置 svg2ttf.copyrightType: String 版权字符串 svg2ttf.tsType: String 用于覆盖创建时间的Unix时间戳（以秒为单位） svg2ttf.versionType: 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.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.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 .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; } Class Name支持.less和.css样式引用。 LicenseLicensed under the MIT License. |
【本文地址】