svg, ttf, woff, woff2图标的转换

最新推荐文章于 2025-04-03 10:51:03 发布

forward_huan

最新推荐文章于 2025-04-03 10:51:03 发布

阅读量1.5k

点赞数 1

分类专栏：笔记

原文链接：https://blog.csdn.net/qq_24357165/article/details/81292448###

版权

笔记专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍如何使用Node.js库将SVG图标转换为TTF、EOT、WOFF和WOFF2等字体格式，适用于前端开发中图标字体的制作与优化。通过具体示例展示从SVG到多种字体格式的转换过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iconfont --> ttf

依赖包 svg2ttf

npm install -g svg2ttf

使用示例

svg2ttf fontello.svg fontello.ttf

var fs = require('fs');
var svg2ttf = require('svg2ttf');

var ttf = svg2ttf(fs.readFileSync('myfont.svg', 'utf8'), {});
fs.writeFileSync('myfont.ttf', new Buffer(ttf.buffer));

ttf --> eot

依赖包 ttf2eot

npm install -g ttf2eot
使用示例

ttf2eot fontello.ttf fontello.eot
ttf2eot < fontello.ttf > fontello.eot

ttf --> woff

依赖包 ttf2woff

npm install -g ttf2woff
使用示例

ttf2woff fontello.ttf fontello.woff

ttf --> woff2

依赖包 ttf2woff2

npm install -g ttf2woff2

使用示例

cat font.ttf | ttf2woff2 >> font.woff2

var fs = require('fs');
var ttf2woff2 = require('ttf2woff2');
var input = fs.readFileSync('font.ttf');
fs.writeFileSync('font.woff2', ttf2woff2(input));

svgs --> fonts

依赖包 svgs2fonts

npm i -g svgs2fonts
使用示例

svgs2fonts {{srcpath}} {{distpath}} --options

svgions --> svgfont

依赖包 svgicons2svgfont

npm install -g svgicon2svgfont

使用示例

svgicons2svgfont --fontname=hello -o font/destination/file.svg icons/directory/*.svg

const SVGIcons2SVGFontStream = require('svgicons2svgfont');
const fs = require('fs');
const fontStream = new SVGIcons2SVGFontStream({
  fontName: 'hello'
});

// Setting the font destination
fontStream.pipe(fs.createWriteStream('fonts/hello.svg'))
  .on('finish',function() {
    console.log('Font successfully created!')
  })
  .on('error',function(err) {
    console.log(err);
  });

// Writing glyphs
const glyph1 = fs.createReadStream('icons/icon1.svg');
glyph1.metadata = {
  unicode: ['\uE001\uE002'],
  name: 'icon1'
};
fontStream.write(glyph1);
// Multiple unicode values are possible
const glyph2 = fs.createReadStream('icons/icon1.svg');
glyph2.metadata = {
  unicode: ['\uE002', '\uEA02'],
  name: 'icon2'
};
fontStream.write(glyph2);
// Either ligatures are available
const glyph3 = fs.createReadStream('icons/icon1.svg');
glyph3.metadata = {
  unicode: ['\uE001\uE002'],
  name: 'icon1-icon2'
};
fontStream.write(glyph3);

// Do not forget to end the stream
fontStream.end();