CSS字型和圖示字型
阿新 • • 發佈：2020-12-17
目錄
一 字型font
字型相關的樣式：
color：用來設定字型的顏色；嚴格意義上color設定前景色，一般都是這樣設定；
font-size:設定字型的大小，和font-size相關的單位：em相當於當前元素的一個font-size；rem相當於根元素的一個font-size;
font-family：指定字型族，字型格式：
可選值：serif（襯線字型） sans-serif（非襯線字型） monospace（等寬字型），這不是指定的某一個字型，指的是字型的分類，瀏覽器自動決定用該類別下的字型。
font-face可以將伺服器中的字型直接提供給使用者使用：
@font-face {
/* 指定字型的名字 */
font-family: "myfont";
/* 伺服器中字型的路徑 */
src: url("./myfont.ttf");
}
這樣使用也有一些問題，下載字型需要一些時間，載入速度的問題；版權的問題；
二 圖示字型
iconfont圖示字型，在網頁中經常使用一些圖片，可以使用圖片引用，圖片會存在一些問題，圖片本身比較大，非常不靈活。所以，在使用圖示時，還可以將圖示設定為字型，然後通過@font-face的方式引入，這樣就可以通過字型的形式使用圖示。
推薦國外的一個圖示字型庫font awesome：https://fa5.dashgame.com/#/
使用步驟：
1、下載；
2、解壓；
3、將CSS和webfonts移動到專案中去，兩個檔案必須要同一級目錄中；
4、將all.css引入到網頁中；
5、使用圖示字型：
直接通過類名使用；
<!-- 類名的使用是重要的，fas類名，空格後面加圖示的類名 -->
<!-- 如果出現亂碼，將fas修改為fab,這兩個是免費的，其它的是是收費的 -->
<i class="fas fa-skull-crossbones" 通過偽元素設定圖示字型
1、找到要設定的圖示的元素，通過before或者after選中；
2、在content中設定字型的編碼；
3、設定字型的樣式；
4、通過實體設定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./font awesome/css/all.css">
<style>
li{
list-style:none;
font-size:25px;
}
/* 利用偽元素設定圖示字型 */
.gushi li::before{
content:"\f296";
/* 在zeal文件中查詢到fas或者fab對應的字型名字 */
font-family: 'Font Awesome 5 Brands';
color:orange;
}
</style>
</head>
<body>
<!-- 類名的使用是重要的，fas是固定寫法，空格後面加圖示的類名 -->
<!-- 如果出現亂碼，將fas修改為fab,這兩個是免費的，其它的是是收費的 -->
<ul class="gushi">
<li>鋤禾日當午</li>
<li>汗滴禾下土</li>
<li>誰知盤中餐</li>
<li>粒粒皆辛苦</li>
</ul>
<!-- 通過實體的方式設定 -->
<span class="fab"></span>
</body>
</html>
效果：
三 阿里巴巴iconfont圖示字型使用方法
網站地址：https://www.iconfont.cn/
上程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="iconfont.css">
<style>
i.iconfont{
font-size:50px;
color:red;
margin-left: 50px;
margin-top:50px;
}
span::before{
content:"\e610";
font-family: "iconfont";
font-size:50px;
color:red;
margin-left: 50px;
margin-top:50px;
}
</style>
</head>
<body>
<!-- 使用實體名設定圖示字型 -->
<i class="iconfont"></i>
<!-- 使用類名設定圖示字型 -->
<i class="iconfont icon-qiehuan"></i>
<!-- 使用偽元素設定圖示字型 -->
<span></span>
</body>
</html>
效果：
