啊,这连字体都要减肥的世道啊

栏目: Html · 发布时间: 5年前

内容简介:菠萝:“大佬,你这几个数字一定要用这个字体吗?雅黑or苹方不可以吗?”设计师大佬一脸委屈地看着菠萝:“可是这个字体好看啊。”表情如下:

菠萝:“大佬,你这几个数字一定要用这个字体吗?雅黑or苹方不可以吗?”

设计师大佬一脸委屈地看着菠萝:“可是这个字体好看啊。”

表情如下:

啊,这连字体都要减肥的世道啊

哎没办法,这眼神分分钟让人觉得自己在犯罪。那就只能搞个font-face了,可是就10个阿拉伯数字要77K,这这这!不行不行,减下肥。

菠萝推荐

font-carrier: github.com/purplebambo…

适用情况:清楚需要渲染的文字,如上述需求只需要阿拉伯数字,一步到位。

  1. npm安装font-carrier
npm install font-carrier --save
复制代码
  1. 新建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等四种字体文件
// });
复制代码
  1. 运行index.js,得到精简的字体文件。
node index.js
复制代码
  1. 使用字体
@font-face{
  font-family: "your font name";
  src: url("your font file url");
}

.text{
  font-family: "your font name";
}
复制代码

以上所述就是小编给大家介绍的《啊,这连字体都要减肥的世道啊》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

The Everything Store

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》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具