自定义字体与iconfont字体图标

最新推荐文章于 2023-03-17 14:30:01 发布

weixin_44637331

最新推荐文章于 2023-03-17 14:30:01 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/weixin_44637331/article/details/95341268

版权

1、自定义字体

<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			@font-face{
				font-family: 'kkk';					//	字体样式1的名称
				src:url(SnellRoundhand.ttc);		//字体包的地址	
			}
			@font-face{
			font-family:"www";						//	字体样式2的名称
			src:url(JDFQUKONG.ttf);
			}
		</style>
	</head>
	<body>
		<p style="font-family:kkk;">小猪佩</p>
		<p style="font-family:www;">nice</p>
	</body>
	</html>

2、iconfont字体图标

Unicode引用 --------html特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
	<style>		
		@font-face {font-family: "iconfont";
	  src: url('iconfont.eot?t=1562481047740'); /* IE9 */
	  src: url('iconfont.eot?t=1562481047740#iefix') format('embedded-opentype'), /* IE6-IE8 */
	  url('iconfont.woff?t=1562481047740') format('woff'),
	  url('iconfont.ttf?t=1562481047740') format('truetype'), 
	  /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
	  url('iconfont.svg?t=1562481047740#iconfont') format('svg'); /* iOS 4.1- */
}
	</style>
</head>
<body>
	<p style="font-family: iconfont ">&#xe673;</p>
</body>
</html>

Symbol引用 -------------js

<html lang="en">
<head>
	<script src="iconfont.js"></script>
</head>
<body>
	<svg aria-hidden="true">
 		 <use xlink:href="#icon-touxiang"></use>
	</svg>
</body>
</html>

Font class引用 ------------------伪元素（css特殊字符）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>					//也可以用写好的<link rel="stylesheet" href="./iconfont.css">
		@font-face{
			font-family: 'iconfont';		
			src:url(iconfont.ttf);				//这里为了简洁没有考虑兼容性等问题
		}
		.icon-icon_camera:before {
	  	content: "\eb91";
	}
	.iconfont{
		font-family: iconfont;
	}
	</style>
</head>
<body>
	<p class="iconfont icon-icon_camera"></p>
</body>
</html>

这里附个图
在这里插入图片描述

weixin_44637331

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自定义字体与iconfont字体图标

1、自定义字体<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> @font-face{ font-family: 'kkk'; // 字...
复制链接

扫一扫