如何引入字体图标库以及了解各种样式，如文本样式，字体样式等

本文主要是介绍如何引入字体图标库以及了解各种样式，如文本样式，字体样式等，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

网络字体
奇葩字体，（字 -> icon）的引用

			@font-face {font-family: "iconfont";src: url('iconfont.eot?t=1564624596715'); /* IE9 */src: url('iconfont.eot?t=1564624596715#iefix') format('embedded-opentype'), /* IE6-IE8 */url('data:application/x-font-woff2;charset=utf-8;base64,=') format('woff2'),url('iconfont.woff?t=1564624596715') format('woff'),url('iconfont.ttf?t=1564624596715') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */url('iconfont.svg?t=1564624596715#iconfont') format('svg'); /* iOS 4.1- */}.lishiziti {font-family:'iconfont'}.weixin:before {content:'\e123'}

图标：
1. 将图标从设计图中切割下来，当做图片使用(小程序)
缺点：放大与缩小比较麻烦，失真；无法更换颜色
2. 字体图标库（网页）

				 <div>hello</div>

字体图标库(第三方库)
iconfont / fontawesome(拓展)
使用方法：
1) 在iconfont官网中选择要使用的图标，放入到购物车中
2) 下载源码到本地
3) 本地引用iconfont.css文件
4) 应用样式即可

				  <i class="iconfont icon-xxx"></i>

文本样式 (可以被继承)

		text-align 	文本在容器中的排列方式leftrightcentertext-indent 文本在容器中的缩进2emtext-decoration-line 	文本装饰线的位置noneunderlineoverlineline-throughtext-decoration-style 文本装饰线的类型soliddoubledotteddashedwavytext-decoration-color 文本装饰线的颜色text-decoration 	以上速写形式text-shadow 	文本的阴影left top c color;列表样式list-style-typecircle/quare/...list-style-imageurl()list-style-positioninside/outsidelist-style:none	【*】

盒子样式（块元素）

		widthheightmargin

盒子上下外边距不会合并，比如，第一个元素margin-bottom:20px;第二个元素margin-top:10px;他们的外边距为20px
margin

			margin-topmargin-rightmargin-bottommargin-leftmargin:10px; 			上右下左都为10pxmargin:0 10px;		上下为0，左右为10pxmargin:0 5px 10px;上0，下10px 	左右5pxmargin:5px 10px 15px 20px 	上右下左

padding

			padding-toppadding-rightpadding-bottompadding-leftpadding:10px; 			上右下左都为10pxpadding:0 10px;		上下为0，左右为10pxpadding:0 5px 10px;上0，下10px 	左右5pxpadding:5px 10px 15px 20px 	上右下左

border

			border-top-widthborder-right-widthborder-bottom-widthborder-left-widthborder-widthborder-top-styleborder-right-styleborder-bottom-styleborder-left-styleborder-styleborder-top-colorborder-right-colorborder-bottom-colorborder-left-colorborder-colorborder:1px solid #ededed;

border-radius

box-shadow

			box-shadow:5px 5px 10px #ccc;box-shadow:inset 0px 0 3px lightblue;

background-origin 背景起点

			border-boxpadding-boxcontent-box

background-clip 对已经铺好的背景裁切

			border-boxpadding-boxcontent-box

background-image

			url()

background-color
颜色

background-position

			位置centerleft top 100px 50px

background-repeat

			repeat-xrepeat-yno-repeat

background

			background:url('') no-repeat center;background:center/cover padding-box url('./image/lianjia_08.png') no-repeat ;

1. 盒子模型
   内容盒子 （width = 内容宽）【传统盒子/w3c盒子】
   是绝大多数浏览器的默认盒子模型
   width : 100px
   表示内容区域的宽为100px
   边框盒子 （width = 边框以内所有元素宽）【怪异盒子/IE盒子】
   width : 100px;
   表示边框以内所有的宽的综合
   width = border + padding + 内容区域

这篇关于如何引入字体图标库以及了解各种样式，如文本样式，字体样式等的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---