字體 文本顏色：color:red;字體分類： 襯線字體serif --字體寬度各異，有襯線 --Times、Georgia、宋體 無襯線字體sans-serif --字體寬度各異，無襯線 --Helvetica、Verdana、Arial、微軟雅黑 等寬字體monospace --字體寬度一樣，一 ...
字體
文本顏色：color:red;
字體分類：
襯線字體serif
--字體寬度各異，有襯線
--Times、Georgia、宋體
無襯線字體sans-serif
--字體寬度各異，無襯線
--Helvetica、Verdana、Arial、微軟雅黑
等寬字體monospace
--字體寬度一樣，一般用於代碼或表格
--Courier New、Consolas
草書字體cursive
--模仿人手寫的字體
--Indie Flower、Comic Sans
裝飾字體Fantasy
沒有什麼統一特征，不屬於上述類別的字體
字體族：使用font-family來設置字體族
font-family:sans-serif;
可以同時指定多個字體，多個字體之間使用逗號隔開（若字體之間有空格或者特殊符號，使用引號）
font-family:sans-serif，”Microsoft YaHei”;
@font-face：字體本機有，其他人沒有，用戶可下載
通過@font-face可以使瀏覽器自動應用伺服器上的字體文件
@font-face{
font-family:’myFont’;
Src:url(‘./ZCOOLXW-R.ttf’)}
註：有些字體有版權，不建議使用
圖標字體：font-awesome.css
1. 使用步驟：將css和fonts文件夾放到項目目錄
引入CSS文件<link rel=’stylesheet’ href=’css/font-awesome.min.css’>
<body>
<span class="fa fa-power-off s1"></span>
</body>
<style>
.s1{font-size:120px;
color:red;}
</style>
2. 將文件css和webfonts放在fa文件夾中
<link rel="stylesheet" href="fa/css/all.css">
使用時：<i class="fas fa-stroopwafel" style="font-size: 100px;"></i>
阿裡圖標字體：http://www.iconfont.cn
選中想要的圖標加入購物車，且添加到項目中，下載到本地，放入iconfont中，引入iconfont/iconfont.css
三種方法
1.通過實體<span class=’iconfont’ style=’font-size:100px;color:red;’></span>
2.通過類<span class=’iconfont icon-icon-test’ style =’ font-size:100px;color:red; ’> </span>
3.通過偽類<p></p >
<style>
p::before{
content:’\e63f’
font-family:iconfont;
font-size:100px;}
</style>
字體大小
1em=1font-size：em也是CSS中的一個單位，相當於一個字體大小
1rem=HTML的1font-size,預設16px，相對於根元素
修改：html{font-size:200px;}
行高（line height）
行高指的是文字占有的實際高度。通過line-height來設置行高，行高可以指定一個大小（px,em），也可以直接設置整數（整數代表行高是字體的指定倍數）
為了使得文字垂直居中：行高設置和高度一樣 line-height=height;
行高還可以設置文字的行間距：行間距=行高-字體大小
字體框：字體存在的格子，設置font-size實際上就是設置字體框的高度。
行高會在字體框的上下平均分配。
字體的簡寫屬性
font同時設置字體相關的所有樣式，後面必須是字體大小和字體族，必須寫（空格隔開）
font:40px ‘Times New Roman ’，Times
font:[加粗 斜體 變形]大小/行高 字體族
行高 可以省略不寫，如果不寫使用預設值
字重，字體加粗：font-weight:100-900;九個級別，但基本上沒有用
可選值：normal 預設值，不加粗
bold 加粗
字體樣式：font-style
可選值：normal 預設值，正常
italic 斜體
字體變形：font-variant
可選值：small-caps（小型大寫字母）
文本樣式
text-align：設置文本的對齊方式
left 預設值，靠左對齊
right 靠右對齊
center 居中對齊
justify 兩端對齊
vertical-align：垂直對齊方式
baseline:基線對齊
top:和父元素頂部對齊
bottom:和父元素的底部對齊 可設置圖片對齊，使其不向基線對齊
super：上標
sub：下標
middle:居中
text-decoration：設置文本修飾
underline：下劃線
line-through:刪除線
overline:上劃線
none:沒有線
white-space:如何處理空白內容
normal 預設值，自動換行
nowrap 不換行
pre 保留文本的格式
text-overflow: 如何處理溢出的文本
ellipsis 使用省略號來表示溢出的內容
