文本属性

-颜色属性

color:black

or color:rgb(255,255,255)

or color:rgba(255,0,0,0.5) 第四个为透明值设置，取值0-1

or color:#000 十六进制

- font-style 用于打开和关闭斜体文本

font-style:italic;斜体 normal 正常

- font-weight 为字体设置粗细程度

font-weight:bold; 加粗，值为700，值有100-900的整数，其中400为正常

bolder 比加粗还要粗

lighter 细线

- font-size 为文字指定大小

- font-family 为文字指定特殊的字体，浏览器只会使用浏览器可以访问到的字体

1.如果取值是中文，需要用双引号或者单引号括起来，多个单词组合也要加

2.设置的字体必须是用户电脑里面已经安装的字体

3.如果设置的字体不存在, 那么系统会使用默认的字体来显示默认使用宋体

4.如果设置的字体不存在, 而我们又不想用默认的字体来显示怎么办? 可以给字体设置备选方案格式:font-family:"字体1", "备选方案1", ...;

5.如果想给中文和英文分别单独设置字体, 怎么办? 但凡是中文字体, 里面都包含了英文但凡是英文字体, 里面都没有包含中文也就是说中文字体可以处理英文, 而英文字体不能处理中文注意点: 如果想给界面中的英文单独设置字体, 那么英文的字体必须写在中文的前面

6.补充在企业开发中最常见的字体有以下几个中文: 宋体/黑体/微软雅黑英文: "Times New Roman"/Arial

- 缩写格式

font:style weight size family;

-网络字体

推荐：WebFont-为你的网页锦上添花_字体网

使用时需要在style里引用存下来的font-face

即上图代码

整体使用如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>@font-face{font-family:'ZoomlaWenzhengming-A064'; /*逐浪文征明吴门狂草书*/src: url('https://code.z01.com/font/ZoomlaWenzhengming-A064.eot?#iefix'); /* IE9 */src: url('https://code.z01.com/font/ZoomlaWenzhengming-A064.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */url('https://code.z01.com/font/ZoomlaWenzhengming-A064.woff') format("woff"), /* chrome、firefox */url('https://code.z01.com/font/ZoomlaWenzhengming-A064.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */url('https://code.z01.com/font/ZoomlaWenzhengming-A064.svg#ZoomlaWenzhengming-A064') format("svg"); /* iOS 4.1- */}div{font-family:'ZoomlaWenzhengming-A064';}</style>
</head>
<body><div>段落标签哒</div></body>
</html>

- 字体图标

iconfont:iconfont-阿里巴巴矢量图标库

在其中找到自己喜欢的图标

通过右上角图标进入购物车

点击下载代码，并将下载好的代码放到和html同级别的文件夹中等待引用

在对应的页面中，通过link标签引入iconfont.css，直接根据对应的类名使用即可

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 两种方式 推荐iconfont font-awesome --><!-- 1.1 iconfont 单色图标库使用 引入样式文件--><link rel="stylesheet" href="../download/font_9saqil75th/iconfont.css"><!-- 2.1 使用iconfont多色图标库 --><!-- script是书写js代码的区域 src引入js文件 --><script src="../彩色/font_3536593_hr7w0y2hsga/iconfont.js"></script><style>.icon {width: 1em; height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}.iconfont{color: blue;}</style>
</head>
<body><!-- 1.2使用单色图标 --><i class="iconfont icon-jiankangzhibiaojiance"></i><!-- 2.2使用多色图标 --><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shutiao"></use></svg>
</body>
</html>

font-awesome:Font Awesome，一套绝佳的图标字体库和CSS框架

引用需要去https://www.bootcdn.cn/ 找到对应的font-awesome链接。我们用的版本是4.7.0，所以找到对应版本，并复制链接进行引用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>、<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body><i class="fa fa-bank"></i>
</body>
</html>