自定義字體
通常情況下，我們一般在設置字體的時候設置的是操作系統上的字體。如果用戶的操作系統中沒有該字體就會影響整個前端的一個用戶體驗。
在CSS3 中，新增了 自定義字體的內容，可以讓我們自己定義一個字體，然后放到服務器上，這樣盡管用戶的操作系統中沒有該字體，也會從服務器下載到指定的字體，不會影響用戶體驗。
文件結構如下
<style> /* 使用 @font-face 來指定一個自定義的字體 */ @font-face { font-family: "Custom font"; /* 起一個名字 */ src: url("fonts/Courier New.ttf"); /* 指定一下字體的位置 */ } p { font-family: "Custom font"; /* 為 p 元素設置這個自定義字體 */ font-size: 20px; /* 設置字體大小 */ } </style>
<body>
<p>Hello, this text font is a custom font...</p>
</body>
運行結果
字體圖標
使用字體圖標可以在網頁加載的時候被快速渲染出來，減少了圖片的請求次數，減少網絡負擔。
字體圖標的優缺點
優點
-
輕量性：一個圖標字體比一系列的圖像（特別是在Retina屏中使用雙倍圖像）要小。一旦圖標字體加載了，圖標就會馬上渲染出來，不需要下載一個圖像。可以減少HTTP請求，還可以配合HTML5離線存儲做性能優化。
-
靈活性：圖標字體可以用過font-size屬性設置其任何大小，還可以加各種文字效果，包括顏色、Hover狀態、透明度、陰影和翻轉等效果。可以在任何背景下顯示。使用位圖的話，必須得為每個不同大小和不同效果的圖像輸出一個不同文件。
-
兼容性：網頁字體支持所有現代瀏覽器，包括IE低版本。
缺點
-
圖標字體只能被渲染成單色或者CSS3的漸變色，由於此限制使得它不能廣泛使用。
-
使用版權上有限制，有好多字體是收費的。當然也有很多免費開源的精美字體圖標供下載使用。
-
創作自已的字體圖標很費時間，重構人員后期維護的成本偏高
制作字體圖標的步驟
- 要有一套 svg 矢量圖，沒有的同學可以去找馬爸爸要
- 將矢量圖與字符進行綁定
- 使用工具或站點生成一套字體 https://icomoon.io/app/#/select
具體過程
-
去找馬爸爸下載一些矢量圖
隨便找一套，點進去下載一些就可以啦
一定要選擇 SVG 下載
-
下載好了圖標就可以去轉換成字體了 點我
然后選中圖標點擊生成字體
然后點擊下載
-
解壓后的目錄結構
需要的文件就兩個style.css以及fonts文件夾，其他的可以刪除啦~~
使用字體圖標
直接在標簽上指定一個 class 屬性，值為 style.css 中對應的選擇器即可
style.css 中的選擇器
直接指定一個 class 屬性即可!
<div class="item">
<a class="icon-tb" href="javascript:;"></a>
</div>
用字體圖標做的小 demo
<!-- 引入 style.css -->
<link rel="stylesheet" href="style.css">
<!-- 設置一些樣式 -->
<style> * { margin: 0; padding: 0; } #wrap { width: 400px; height: 400px; border: 1px solid; margin: 100px auto; } #wrap>.item { width: 100px; height: 40px; border: 1px solid deeppink; margin: 10px auto; } #wrap>.item>a { height: 40px; text-decoration: none; font-size: 25px; display: block; line-height: 40px; text-align: center; color: deepskyblue; transition: 1s; } #wrap>.item>a:hover { color: white; background-color: deeppink; } </style>
<!-- 布局 -->
<div id="wrap">
<div class="item">
<a class="icon-tb" href="javascript:;"></a>
</div>
<div class="item">
<a class="icon-zf" href="javascript:;"></a>
</div>
<div class="item">
<a class="icon-ys" href="javascript:;"></a>
</div>
<div class="item">
<a class="icon-yx" href="javascript:;"></a>
</div>
<div class="item">
<a class="icon-zf" href="javascript:;"></a>
</div>
</div>
運行結果
