本文主要是介绍如何引入字体图标库以及了解各种样式，如文本样式，字体样式等，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
网络字体
奇葩字体，（字 -> 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 ;
- 盒子模型
内容盒子 （width = 内容宽）【传统盒子/w3c盒子】
是绝大多数浏览器的默认盒子模型
width : 100px
表示内容区域的宽为100px
边框盒子 （width = 边框以内所有元素宽）【怪异盒子/IE盒子】
width : 100px;
表示边框以内所有的宽的综合
width = border + padding + 内容区域
这篇关于如何引入字体图标库以及了解各种样式，如文本样式，字体样式等的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
