无论是在PC端还是移动端，在开发一些图表统计或者数字展示的时候，经常需要在UI特效中加入一些自定义字体来增加展示效果和美观度，而各个系统提供的系统字体很难满足需求，比如下图中的数字展示，UI就使用了一种名为“-Bold”的外文字体。

Web 项目

在Web项目中，我们可以直接将字体文件放在代码包中或者通过静态资源库下载，但是这样会增加代码包的大小。

小程序项目

在小程序中，微信提供了字体下载接口wx.：

wx.loadFontFace({ family: 'Bitstream Vera Serif Bold', source: 'url("https://sungd.github.io/Pacifico.ttf")', success: () => { console.log } })

问题

以上方案的缺点都是：要么代码包体积增大，要么需要用户到本地下载。

对于这种只想显示数字的东西，我们其实并不需要一整套字体库文件，尤其是中文字体库动辄几十、几百MB，下载流量还很昂贵！

比如上图中的数字显示其实一共只需要11个字符，0-9和英文逗号。这样我们可以先在网上找到字体文件并下载，然后用这个软件把字体文件“-Bold”整个删除只保留需要的11个字符，然后导出成手机需要的ttf字体格式：

上图我导出的.ttf字体文件一共只有3KB，所以直接放进小程序包里就可以使用了，下面是实际效果：

使用步骤

1.将字体文件放入项目中，然后导入

/* main.styl */ @font-face font-family: 'numFont' src: url("numFont.ttf") font-weight: normal font-style: normal

2. 给标签添加类名

123,034

3. 在样式中使用 font- 来使用自定义字体

.num font-family 'numFont' font-size 24px font-weight 700 color #333 text-align center padding 48rpx 0 88rpx

注意事项：对于此类内嵌字体，使用前一定要验证字体版权，有版权的字体不购买版权是无法内嵌的（经过多方验证，上图UI中使用的“-Bold”字体是有版权的，Din系列字体是德文字体，国内由方正代理，所以最终放弃使用，选择了谷歌的两款免费字体作为替代：，所以使用此类内嵌字体前记得验证字体版权）；手机端要求字体格式为ttf，网上下载的字体大多是otf格式的。