网站上怎么做动画广告视频下载,开一个免费网站,搞外贸一般是干什么的,php模板网站前言#xff1a;在阿里图标库中#xff0c;如果你没有这个字体图标的线上项目#xff0c;那么你怎么在本地项目中的原始图标文件中添加新的图标呢#xff1f;
背景#xff1a;现有一个vue项目#xff0c;下面是这个前端项目的字体图标文件。现在需要新开发功能页#x…前言在阿里图标库中如果你没有这个字体图标的线上项目那么你怎么在本地项目中的原始图标文件中添加新的图标呢
背景现有一个vue项目下面是这个前端项目的字体图标文件。现在需要新开发功能页我需要往里面新增字体图标怎么新增 解决方式
在阿里图标库中建一个字体图标项目并在图标项目内添加你想新增的字体图标然后点击【下载至本地】。 打开或解压刚下载的压缩包。把iconfont.ttf, iconfont.woff, iconfont.woff2三个文件复制到项目的字体图标文件目录下当然你得改一下这三个文件名因为本地项目字体文件跟你刚刚下载的字体文件名称一样。比如我改成了iconfont-dzzz.ttf, iconfont-dzzz.woff, iconfont.woff2 。 接着你就得在vue项目的字体文件iconfont.css文件中添加这么一段代码
font-face {font-family: iconfont; /* Project id 2791406 */src: url(./iconfont-dzzz.woff2?t1656658266061) format(woff2),url(./iconfont-dzzz.woff?t1656658266061) format(woff),url(./iconfont-dzzz.ttf?t1656658266061) format(truetype);
}下图是我本地项目中的iconfont.css文件中的样子 4. 接着你还得在iconfont.css文件的末尾添加新字体图标对应的伪类。如下图其中打马赛克的是你将要在html代码中使用的字体图标class类名content的值就是字体图标对应的unicode索引。 unicode索引在iconfont.css文件中可以找到 那么这样你就成功在原有字体图标库中添加了新的字体图标了。接下来你就可以使用你添加的字体图标了。
字体文件知识
在阿里字体图标文件夹中有很多字体文件CSS、JS、JSON、TTF、WOFF、WOFF2 等。
这些文件有啥用
CSS 文件用于定义图标字体的样式和类。它包含了 font-face 规则引入字体文件以及每个图标对应的 Unicode 字符。CSS 文件使得在 HTML 中使用图标变得简单直观。
JS 文件可能用于动态加载字体文件处理字体图标库的某些功能或与其他前端框架集成。JS 文件在某些情况下用于增强字体图标的功能比如动态替换图标、添加动画效果等。
JSON 文件包含图标库的元数据例如图标名称、Unicode 字符编码和其他相关信息。它常用于自动化工具或构建系统帮助开发者快速查找和引用图标。
TTF (TrueType Font) 文件是 TrueType 字体格式兼容性较好适用于较老的浏览器和系统。它是图标字体的一个基础格式。
WOFF (Web Open Font Format) 文件是一种为网页优化的字体格式具有良好的压缩和加载性能。它在现代浏览器中广泛使用提供了比 TTF 更好的性能。
WOFF2 是 WOFF 的改进版本具有更高的压缩率和更快的加载速度。它是目前最优化的网页字体格式但需要现代浏览器的支持。
