小程序引入中文字体

做小程序的时候，有时候会遇到，设计的UI中出现了特殊的字体，而单独的导入一个中文字体库是很大的，而且容易经常加载失败。

这个时候我们可以想办法将字库中用到的字单独提取出来，这样就会减少体积，保证使用了。

具体步骤如下：

1）在线提取字体https://www.fontke.com/tool/subfont/

比如上图，我的小程序只需要7个字，单独提取出来只有几K

2）再到这个网站https://transfonter.org/转成base64只有十几k

3）在小程序中引入使用即可

 
@font-face {
  font-family: TsangerAMXK;
  src: url('data:font/truetype;charset=utf-8;base64,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VwAwADEAAFRzYW5nZXJBTVhLLVcwMQAAVgBlAHIAcwBpAG8AbgAgADEALgAwADAAMAA7AFAAUwAgADEALgAwADAAMQA7AGgAbwB0AGMAbwBuAHYAIAAxAC4AMAAuADgAOAA7AG0AYQBrAGUAbwB0AGYALgBsAGkAYgAyAC4ANQAuADYANAA3ADgAMAAwAABWZXJzaW9uIDEuMDAwO1BTIDEuMDAxO2hvdGNvbnYgMS4wLjg4O21ha2VvdGYubGliMi41LjY0NzgwMAAAVABzAGEAbgBnAGUAcgBBAE0AWABLAC0AVwAwADEAAFRzYW5nZXJBTVhLLVcwMQAAVABzAGEAbgBnAGUAcgBBAE0AWABLACAAaQBzACAAYQAgAHQAcgBhAGQAZQBtAGEAcgBrACAAbwBmACAAQgBlAGkAagBpAG4AZwAgAFQAcwBhAG4AZwBlAHIAIABDAGgAYQByAGEAYwB0AGUAcgAgAFQAZQBjAGgAbgBvAGwAbwBnAHkAIABDAG8ALgAsACAATAB0AGQALgAAVHNhbmdlckFNWEsgaXMgYSB0cmFkZW1hcmsgb2YgQmVpamluZyBUc2FuZ2VyIENoYXJhY3RlciBUZWNobm9sb2d5IENvLiwgTHRkLgAAQgBlAGkAagBpAG4AZwAgAFQAcwBhAG4AZwBlAHIAIABDAGgAYQByAGEAYwB0AGUAcgAgAFQAZQBjAGgAbgBvAGwAbwBnAHkAIABDAG8ALgAsACAATAB0AGQALgAAQmVpamluZyBUc2FuZ2VyIENoYXJhY3RlciBUZWNobm9sb2d5IENvLiwgTHRkLgAAQgBlAGkAagBpAG4AZwAgAFQAcwBhAG4AZwBlAHIAIABDAGgAYQByAGEAYwB0AGUAcgAgAFQAZQBjAGgAbgBvAGwAbwBnAHkAIABDAG8ALgAsACAATAB0AGQALgAAQmVpamluZyBUc2FuZ2VyIENoYXJhY3RlciBUZWNobm9sb2d5IENvLiwgTHRkLgAAQwBoAGkAbgBlAHMAZQAgAGYAbwBuAHQAIABmAG8AcgAgAGEAbgB5ACAAcwB5AHMAdABlAG0ALgAAQ2hpbmVzZSBmb250IGZvciBhbnkgc3lzdGVtLgAAQgBlAGYAbwByAGUAIAB1AHMAaQBuAGcAIAB0AGgAaQBzACAAZgBvAG4AdAAsACAAeQBvAHUAIABtAHUAcwB0ACAAYgBlACAAYQB1AHQAaABvAHIAaQB6AGUAZAAgAGIAeQAgAEIAZQBpAGoAaQBuAGcAIABUAHMAYQBuAGcAZQByACAAQwBoAGEAcgBhAGMAdABlAHIAIABUAGUAYwBoAG4AbwBsAG8AZwB5ACAAQwBvAC4ALAAgAEwAdABkAC4AAEJlZm9yZSB1c2luZyB0aGlzIGZvbnQsIHlvdSBtdXN0IGJlIGF1dGhvcml6ZWQgYnkgQmVpamluZyBUc2FuZ2VyIENoYXJhY3RlciBUZWNobm9sb2d5IENvLiwgTHRkLgAAVABzAGEAbgBnAGUAcgBBAE0AWABLAABUc2FuZ2VyQU1YSwAAVwAwADEAAFcwMQAAAAACAAAAAAAA/4MAMgAAAAAAAAAAAAAAAAAAAAAAAAAAAAoAAAABAAIBAgEDAQQBBQEGAQcBCAd1bmk0RjVDB3VuaTUyMzYHdW5pNTY2OAd1bmk2MEM1B3VuaTYyMTAHdW5pNzUxRgd1bmk4QkQ3AAAAAAAB//8AAgABAAAADAAAABYAAAACAAEAAwAJAAEABAAAAAIAAAAAAAAAAQAAAADVpCcIAAAAANeHX4MAAAAA1+0GLQ==') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}