前端对UI设计的特殊字体的处理

背景

UI在设计的时候针对某部分需要特殊展示的可能采用了特殊的字体。比如下图中的统计的数字，这个数字的字体在页面中用到的范围有限，只在统计的地方用到了字体中的数字。

解决方案

1. 类似这种的固定的可以让UI切一张精灵图，前端自己拼起来；
2. 将单个数字上传到iconfont上，前端下载字体文件后使用的时候再拼起来；
3. 引入数字所用到的字体，引入后前端再使用；
4. 对原字体进行裁决，只保留字体中的数字。然后再引入，再使用。

针对第一二种方案需要前端再拼一次不能够直接使用，第3种全字体的方式引入会带来额外的网络负担，页面字体显示可能会延时。所有采用第4种裁剪字体的方式。

裁剪字体

裁剪字体可以自己找一个字体编辑的软件，以下介绍win下的一款字体裁剪软件。

此处我用的是FontCreator下面介绍简单的使用技巧

1. 安装完软件后[网上有绿色版的]打开软件

2. 打开下载完成的字体，字体下载也挺好找的，或者让UI给一份。我此处是打开的已安装的字体。

3. 删除不需要的文字，只保留自己需要的。

4. 将裁剪完的字体另存为一个新的字体

可以看到裁剪完的字体大小还是比较理想的

5. 将字体引入到页面中进行使用

@font-face{
  font-family:'fbfristpage-number';
  src:url('../font/firstpage-number.ttf') format('truetype');
}
复制代码

转载于:https://juejin.im/post/5c65158b51882524c84f0712