自定义字体与iconfont字体图标

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>

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值