taro开发小程序时,开发阶段使用图标字体没问题,真机预览后图标就不显示了
后来改成直接导入对应图标的svg,每次都要找svg图片就很烦,而且一放大字体也跟着变粗,看了下源文件也不大,打算直接放进项目里了
打开https://transfonter.org/上传woff2字体文件,选中base64编码
解压下载的文件夹,把stylesheet.css文件重命名为icon.less放到src下面,app.tsx导入,把node_modules/remixicon/fonts/remixicon.less里的内容复制到icon.less里
最终的icon.less
/*
@font-face {
font-family: 'remixicon';
src: url('data:font/woff2;charset=utf-8;base64,base64content') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
[class^="ri-"], [class*=" ri-"] {
font-family: 'remixicon' !important;
font-style: normal;[](https://)
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.ri-lg { font-size: 1.3333em; line-height: 0.75em; vertical-align: -.0667em; }
.ri-xl { font-size: 1.5em; line-height: 0.6666em; vertical-align: -.075em; }
.ri-xxs { font-size: .5em; }
.ri-xs { font-size: .75em; }
.ri-sm { font-size: .875em }
.ri-1x { font-size: 1em; }
.ri-2x { font-size: 2em; }
.ri-3x { font-size: 3em; }
.ri-4x { font-size: 4em; }
.ri-5x { font-size: 5em; }
.ri-6x { font-size: 6em; }
.ri-7x { font-size: 7em; }
.ri-8x { font-size: 8em; }
.ri-9x { font-size: 9em; }[](https://)
.ri-10x { font-size: 10em; }
.ri-fw { text-align: center; width: 1.25em; }
//这里的:global要去掉或者注释掉
.ri-24-hours-fill:before { content: "\ea01"; }
.ri-24-hours-line:before { content: "\ea02"; }
.ri-4k-fill:before { content: "\ea03"; }
.ri-4k-line:before { content: "\ea04[](https://)"; }
...
.ri-zoom-out-line:before { content: "\f2dd"; }
.ri-zzz-fill:before { content: "\f2de"; }
.ri-zzz-line:before { content: "\f2df"; }