字体图标

最新推荐文章于 2023-07-06 22:56:08 发布

端脑

最新推荐文章于 2023-07-06 22:56:08 发布

阅读量229

点赞数

分类专栏：前端文章标签：字体图标

本文链接：https://blog.csdn.net/qq_43776742/article/details/103393728

版权

前端专栏收录该内容

90 篇文章 2 订阅

订阅专栏

字体图标

优点

可以做出和图片一样的事情
本质是文字，所以可以任意去修改颜色大小阴影
本身体积小携带的信息没有削减
几乎所有浏览器支持，移动设备必备良药

使用场景

公司内部自己设计图标

UI设计字体图标效果图（svg）
前端人员上传生成兼容性字体文件包比如
- https://icomoon.io/
- https://www.iconfont.cn/
下载字体文本包到本地
把字体文件包引入到html页面中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	    @font-face {  /* 电脑中没有的字体，我们需要声明 */
          font-family: 'icomoon';
          src:  url('fonts/icomoon.eot?7kkyc2');
          src:  url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
          url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
          url('fonts/icomoon.woff?7kkyc2') format('woff'),
          url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
          font-weight: normal;
          font-style: normal;
        }

        span {
        	font-family: "icomoon";
        	font-size: 200px;
        	color: red;
        }

        p::before {
        	font-family: "icomoon";
        	font-size: 100px;
        	content: "\e93e";
        }

	</style>
</head>
<body>
	<span></span>
	<span></span>
	<p></p>
</body>
</html>

返回目录

端脑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体图标

字体图标优点可以做出和图片一样的事情本质是文字，所以可以任意去修改颜色大小阴影本身体积小携带的信息没有削减几乎所有浏览器支持，移动设备必备良药使用场景公司内部自己设计图标UI设计字体图标效果图（svg）前端人员上传生成兼容性字体文件包比如https://icomoon.io/下载字体文本包到本地把字体文件包引入到html页面中...
复制链接

扫一扫

专栏目录