当前位置: 首页 > news >正文

UniappX动态引入在线字体图标,不兼容css时可用。

优缺点

优点:不需要占用本地存储,可直接在线同步库图标,不用再手动引入ttf文件,不用手动添加键值对对应表。

缺点:受网速影响,字体库cdn路径可能会更改,ios端首次加载,可能会无图标(详见: ios无授权请求不了网络)。

开发可用线上修改,生产用本地文件。

1.通过css url获取获取唯一标识对应的ttf文件

这里使用的是codesign的示例,阿里巴巴矢量图同理

uni.request<String>({
				// css路径,即最初提供的路径
				url: "https://cdn2.codesign.qq.com/icons/5OjE7NgEbM8mM03/latest/iconfont.css",
				success: (res : RequestSuccess<string>) => {
					// 会将内容以文本返回
					this.extractCssContent(res.data!)
					// codesign的唯一标识是t,根据正则或者字符串处理方法,求得t标识的值
					const match = res.data!.toString().match(/url\('.*?[\?&]t=([^&']*)/)! as String[];
					uni.loadFontFace({
						global: true,//应用到全局
						family: 'LYIcon',//自定义字体名称
						//                                                                              求得的值的下标为1
						source: `https://cdn2.codesign.qq.com/icons/5OjE7NgEbM8mM03/latest/iconfont.ttf?t=${match[1]}`,
					})
				}
			})

css解析 为键值对

function extractCssContent(cssText : string) {
				// 解析为{ name:'e001' }样式的键值对
				let icons = cssText.split('.icon-').slice(1).reduce((prev : UTSJSONObject, i : string) : UTSJSONObject => {
					let key = (i.split(':') as string[])[0];
					let val = ((((i.split('content:') as string[])[1].split(';') as string[])[0]).split('\\') as string[])[1].slice(0, -1);
					prev.set(key, val)
					return prev
				}, {} as UTSJSONObject);
				ConfigStore.setIcons(icons);
			}

2.解析后的文件使用

计算Unicode码

// 映射表
	const reflect = {
		'play-custom': 'play'
	};
	const calcText = (key : string) : String => String.fromCharCode(parseInt('e001')!, 16))
	// 解析字符串                                                            icons是存储的对象              为防止重名冲突,reflect为映射表          parseInt解析16位字符为10进制
	const calcText = (key : string) : String => String.fromCharCode(parseInt(icons.value.getString(key in reflect ? reflect.getString(key)! : key)!, 16))

使用

<text>{{calcText('play-custom')}}</text>

相关文章:

  • 《P3601 签到题》
  • 力扣hot100【链表】
  • 克魔助手(Kemob)安装与注册完整教程 - Windows/macOS双平台指南
  • IMS V 6即将破解制造业数字化转型“难题”!
  • WEB安全--内网渗透--Kerberos之AS_REQAS_REP
  • [蓝桥杯] 挖矿(CC++双语版)
  • 【RabbitMQ】队列模型
  • C++(进阶) 第11智能指针
  • HTTP的Keep-Alive是什么?TCP 的 Keepalive 和 HTTP 的 Keep-Alive 是一个东西吗?
  • ZW3D二次开发_普通对话框_设置对话框弹出位置
  • 基于webgis画点(未知坐标情况下)
  • FL-00002-MongoDB案例+1-数据救援工作
  • 【C++】函数直接返回bool值和返回bool变量差异
  • 使用 redis 实现消息队列
  • 【leetcode hot 100 70】爬楼梯
  • 万相2.1本地部署教程——阿里开源超强AI视频模型:物理模拟×中英双驱,定义AI生成新标杆!
  • almalinux 8 9 升级到指定版本
  • Ansible的使用2
  • 一周学会Pandas2 Python数据处理与分析-Pandas2二维数据结构-DataFrame
  • ruby超高级语法
  • 交涉之政、交涉之学与交涉文献——《近代中外交涉史料丛书》第二辑“总序”
  • 国办印发《关于进一步加强困境儿童福利保障工作的意见》
  • 14岁女生瞒报年龄文身后洗不掉,法院判店铺承担六成责任
  • 北外滩集团21.6亿元摘上海虹口地块,为《酱园弄》取景地
  • 图忆|红场阅兵:俄罗斯30年来的卫国战争胜利日阅兵式
  • 英国和美国就关税贸易协议条款达成一致