微信小程序使用的第三方FontIcon库的一些字体图标
浏览：1102 次
大多数在线文章都是关于如何将整个TTF字体库转换为可使用的小程序的。字体库通常需要数百K字节。例如，FontAwesome。ttf有166 KB，Ionics ttf大小为112KB。对于小程序的2M限制，数百K字节是一个很大的开销。程序实际使用的图标数量可能只有几个。不需要转换整个字体库来使用。
所以本文主要介绍如何仅使用一些图标。
1、 提取一些图标并重新制作TTF字体
我没有使用淘宝提供的字体图标，这在互联网上的大多数文章中都有，但只使用了几个Ionicons的图标。所以我打开并点击了右上角的下载包，它提供了整个字体库的svg矢量文件。
然后打开它，单击左上角的“导入图标”，然后导入带有所需图标的svg文件。您可以一次导入多个图标。
导入后，单击右下角的Generate Font（生成字体），进入下一页，单击右上角的Download（下载）下载压缩包。
在提取的文件中：样式。css和字体/iconoon。ttf是有用的。
2、 将TTF字体转换为Base64格式
使用FontIcon的小程序必须首先转换为Base64。
打开并单击“添加字体”以添加在上一步骤Ttf中创建的图标，选择“系列支持”选项和Base64编码，不要选择以下任何格式。
单击“转换”下载生成的压缩包。
在压缩包中，样式表。css是Base64格式的字体库。
3、 小程序调用图标
打开app。wxss放在applet项目文件中，并将stylesheet.css
的内容将复制到app.wxss的结尾。开放式风格。css将除@font-face外的所有内容复制到app.wxss的末尾。
内容中有两个字体系列：“icomoon”；您可以将其更改为您想要的名称，例如，我将它更改为font-family:'io'；。
这样，就可以在小程序中调用它。例子：
4、 附加app.wxss中添加的全部内容
我在这里只使用三个图标。只是一个例子。
@字体{
font-family:'io'；
src:url（数据：font/truetype；字符集=utf-8；base64，AAEAAAANAAAwBQRkZUTYUhSREAAAfAAAAAHEdERUYAJwAAAAAHoAAAAB5PUy8yDxMFxgAAAVgAAABgY21hcBdX2eIAAHUAAABXmdhc3AAAQAAAHmAAAAAhnbHlmEiTYSgAAA0gAAAJYaGVhZBI6ZmUAAADcAAAANmhoZWEHYgPHAABFAAAACRobXR4C7UAwAAAAAAAAbgAAAAcbG9jYQGu AOYAAAM0AAAEm1heHAADABFAAAAACBuYW1l+lhN2AAABaAAAAGbcG9zdAqwKVAAAc8AAAAWQAAAAAAAAAA3NGdFl8PPPUACwQAAAAAANe+kQQAAAAAA176RBAAAAAADoANgAAAACA ACAAAAAAAAaaAAAPA/8AAAAQAAAAAAAOGAAAAAAAAA AAAAAAA AAAAAAAAAAAAAAEAAAAAAAHAAAAAAA-AAAAAA-AAAAAAAAFAAAAAAZAAAAAAQAaaAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAABAAAAAAAKAAAAAAEAAAAAAABAAAAAAAA2AAAAAAIAAAAAAAA1AAAAAAHpAgPA/8AAAAQAAA AAAAAA EAAAAAAFgAAwABAAAAAAEADwAAAAKAAgAAgACAAEAIOKC//3/wAAAAAAIOkA///3/wAA/+QXBQADAAAAAAAAAAAAAAAQIAAAAAAAAAAA AAAAAAaaAAAAAAAAAAAAAA AAAAAAA-AAAAAA-AAAAAAAAHAAAAAA，AAAAAA3AAAAAAA AAAAAAAAAAAAAAAAAgAAOQIAAQAAAAAAAAAAIAADkCAAMAYAAgA6ADYAAbACkANQAAASIHDgEHBHUFx4BFxYzMjc+ATc2NTQnLgEnJg8BFAYjIiY1JyY2MzIWAyImNTQ2MzIFRQGAgBWTExxICEhIHFMTFZWTExxICEhHFMTDQGEAwMEAYBFA8OFSMQFhYQEBYWA2AhIHFmtFZWTEXxICehIHFMZWTExXICHb5g0REQ3mDhUV/mkVEA8WFg8QFQA AAgBgACADOANgABsAOGAASIHDgEHBhUFx4BFxYzMjc+ATc2NTQnLgEnJhMBDgEjIiYvASY0PwE+ATMyFh8BNz4BMzIWHEWFAcCAFZMTHEgISEgcUxMVlZMTHEg ISEgcuxMf/70Ag0IBQ0FcAMDIwIDAQICAlj0AgMBAgMBIwICA2AhIHFMTFZWTExxICEhIHFMTF ZWTExxMICH+0/7zAgkGBnACBwIkAQEBAVn2AQEBASQDBwIAAAYAAgA6ADYAAbAEIAAAEiBw4BBwYVFBceARcWMzI3PgE3NjU0Jy4BJyYTJwcGIicuATONj8Bj4BNTQ2NzYyHwE3NjIXFhQPARcWFAcGIicCAfZMTHEgISEGCUxMVLZMTHEGGISEGCUxME2lpChoKBAUFBGp qBAUFBAoaCmlpChoKCQlqagkJChoKA2AhIHFMTFZWTExxICEhIHFMTF ZWTExx ICH9yWpqCQkFDAYGDAVpaQUMBgYMBQkJamoJCQoaCmlpChoKCQkAAAAADgCuAAAAAAAAEABwAQAAEAAAAAAAIABwAoAAE公司
