你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
anhulife

webfont-pick(自定义字体的新锤子) 0个回复 专栏 @ 工具

anhulife 发布于 1 年前

字体是在页面中呈现内容不可缺少的重要元素,合适的字体能让内容更能抓住用户的注意力。
我们的追求是在多平台上呈现可预知的一致的文字效果给用户,但限于平台的字体支持,我们在使用一些不常见的字体时畏首畏脚。
长久以来,我们解决这个问题,一般都采用图片替换文字的方法。这个方法虽然简单,但是弊端不少:

  1. 图片体积一般比较大,如需半透明处理,体积会进一步增大
  2. 工作量增加不少
  3. 图片放大后可能会失真

随着CSS3的推广,一个通过@font-face自定义字体的技术进入大家的视线中。
这个技术目前正被大量应用于自定义图标的实现。但是很少用来实现自定义字体,尤其是中文字体。

这是因为中文包含很多汉字,所以字体文件的体积一般都比较大。如果用做自定义字体,
页面会先下载字体文件,然后再呈现页面,这会导致加载缓慢,用户的流量被浪费。

然而在我们使用字体时,基本上只用来呈现有限的文字,下载整个字体文件是多余的。
那我们是否可以精简字体文件,让它只包含指定文字的字体信息,来解决问题?答案是可以的。

webfont-pick就是这样一个工具,它使用起来非常简单:

npm install webfont-pick -g
# 更多选项请执行 webfont-pick --help 查看
webfont-pick --font=/Library/Fonts/YuppySC-Regular.otf --text="你好,世界!" -o ~/Desktop/webfont

执行上述命令后,只包含你好,世界!这六个汉字的自定义字体文件会出现在指定的目录,并且生成了一个示例页面,用来说明如何使用。
有了webfont-pick之后,不管是微软雅黑还是方正呐喊都可以放心的应用到页面中。

另外webfont-pick不只可以通过命令行调用,还可以通过程序调用,详情请参考项目主页
目前项目刚刚推出,有什么建议或是问题也可以在上面反馈。

注1: webfont-pick目前只支持解析WOFF, OTF, TTF格式的字体

注2: webfont-pick的想法来源于ICONFONT.cn

注3: webfont-pick的实现参考grunt-webfont

等待第一条回复
登录后回复,如无账号,请使用邀请码注册