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

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();

文章参考链接
由iconfont引起的svg、ttf、woff、woff2图标的研究及转换(svgs2fonts)

svg, ttf, woff, woff2图标的转换相关推荐

如何在css文件中使用本地ttf/woff/woff2字体？
如何在css文件中使用本地ttf/woff/woff2字体? 1.首先下载ttf.woff.woff2字体文件免费的字体文件可以上阿里矢量图库进行下载,不过数量很少. 2.在css文件中配置相应代码 ...
Maven工程.ttf .woff .woff2读取插件配置
maven插件配置
解决Web部署 svg/woff/woff2字体 404错误
问题:最近在IIS上部署web项目的时候,发现浏览器总是报找不到woff.woff2字体的错误.导致浏览器加载字体报404错误,白白消耗了100-200毫秒的加载时间. 原因:因为服务器IIS不认SV ...
Php在线字体woff转svg,在线字体格式转换ttf/otf/eot/woff/woff2格式工具
在做网站样式时,我们有时找不到自己需要的字体文件,就需要自己需要自己来制作一个,如何制作了?这里给大家推荐一款自己在用的在线字体转换ttf/otf/eot/woff/woff2格式工具. 这款在线字体 ...
非常方便的将 SVG 图标生成 TTF/EOT/WOFF/WOFF2/SVG 字体
一般情况我通过 iconfont 或者 icomoon 来实现图标管理生成字体,导入到项目中使用. ┌────────┐ ┌────────────┐ │iconfont │──┐ │ Project ...
web服务器字体.svg/.woff/.woff2 404错误解决方案
先来看看问题按理说不应该报404啊,因为我这个路径下面的的确确有这个文件相信不少开发者都遇到过字体引用的问题,明明路径啥的都没问题,但就是浏览器输出错误信息.引起类似以上问题的原因是由于Web服务 ...
将svg编译成字体图标
有时将svg图标编译成字体图标,可以更方便的来使用,下面就介绍如何将svg编译成字体图标 1. 使用npm安装svgtofont npm i svgtofont 2. 编译字体图标 const svg ...
将svg文件化成字体图标的步骤
一前提摘要有一个活就是按照需求在现有的项目中新增几个项目和修改几个项目,是很简单的,但当中遇到了一个小问题,就是tabs中图标选中和被选中的颜色问题,如果是新开发的,目前掌握的有两种办法 ...
[html] svg如何转为字体图标？
[html] svg如何转为字体图标? 选择一个支持在线转换的网站如IconFont或icomoon上传svg文件的图标在相应的地方进行下载好处字体图标直接用color自由控制颜色:整合在一起,减少 ...
vue项目 - svg格式的icon图标无法显示颜色
前言在项目中遇到svg格式的icon图标无法显示颜色,这个问题.尝试过很多方法,最后发现不是代码的问题,而是iconfont图标库中没有配置好. 1. 发现问题如下当点击菜单选项时,icon和文字 ...

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

iconfont --> ttf

ttf --> eot

ttf --> woff

ttf --> woff2

svgs --> fonts

svgions --> svgfont

svg, ttf, woff, woff2图标的转换相关推荐

最新文章

热门文章