字體
文本顏色：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=https://www.cnblogs.com/huaweimian/p/’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 使用省略號來表示溢位的內容
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/4009.html
標籤：Html/Css
上一篇：WEB前端第十二課——CSS盒子
下一篇：HTML常用標簽(上)