内容简介:菠萝:“大佬,你这几个数字一定要用这个字体吗?雅黑or苹方不可以吗?”设计师大佬一脸委屈地看着菠萝:“可是这个字体好看啊。”表情如下:
菠萝:“大佬,你这几个数字一定要用这个字体吗?雅黑or苹方不可以吗?”
设计师大佬一脸委屈地看着菠萝:“可是这个字体好看啊。”
表情如下:
哎没办法,这眼神分分钟让人觉得自己在犯罪。那就只能搞个font-face了,可是就10个阿拉伯数字要77K,这这这!不行不行,减下肥。
菠萝推荐
font-carrier: github.com/purplebambo…
适用情况:清楚需要渲染的文字,如上述需求只需要阿拉伯数字,一步到位。
- npm安装font-carrier
npm install font-carrier --save 复制代码
- 新建index.js,将下列代码保存到本地
// 待抽取的字 var text = '0123456789'; // 引入font-carrier.js var fontCarrier = require('font-carrier'); // 解析本地原来的字体文件 var transFont = fontCarrier.transfer('font/DIN Alternate Bold.ttf'); // font/DIN Alternate Bold.ttf替换成你的字体文件地址 // 创建目标字体 var font = fontCarrier.create(); // 向字体中写入抽取的字形信息 font.setGlyph(transFont.getGlyph(text)); // 导出新字体到文件夹 // 默认会导出svg,ttf,eot,woff四种字体 // path结尾默认为导出新字体文件的名称 font.output({ path:'./fontMin' // 在当前路径导出fontMin.ttf等四种字体文件 }); // or // font.output({ // path:'./fontMin/aaa' // 在当前路径的fontMin文件夹下导出aaa.ttf等四种字体文件 // }); 复制代码
- 运行index.js,得到精简的字体文件。
node index.js 复制代码
- 使用字体
@font-face{ font-family: "your font name"; src: url("your font file url"); } .text{ font-family: "your font name"; } 复制代码
以上所述就是小编给大家介绍的《啊,这连字体都要减肥的世道啊》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- CSS 字体:字体特性
- iOS 自定义字体设置与系统自带的字体
- ReactNative字体大小不随系统字体大小变化而变化
- 再谈中文字体的子集化与动态创建字体
- 可爱气质的中文字体,字体视界法棍体-开源免费下载
- 深度字体安装器 V1.0 正式发布,打造个性化字体库
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
The Everything Store
Brad Stone / Little, Brown and Company / 2013-10-22 / USD 28.00
The definitive story of Amazon.com, one of the most successful companies in the world, and of its driven, brilliant founder, Jeff Bezos. Amazon.com started off delivering books through the mail. Bu......一起来看看 《The Everything Store》 这本书的介绍吧!