字型圖示
- 一、自定義字型
- 二、阿裡巴巴矢量圖庫使用
- 三、字型圖示
前端在處理字型的時候，一般都會引用大多數電腦已經安裝好的字型，如微軟雅黑、宋體等等，進而來保證浏覽器中字型渲染效果一緻，而我們如果引用了一些自己本地自行安裝的字型時，而使用者的計算機上卻沒有，就會使得使用者計算機上顯示的是浏覽器的預設字型，是以我們需要用到字型圖示等。
一、自定義字型
文法：
@font-face{
font-family:<family-name>;/*必須屬性，指定字型的名字*/
src:<src>;/*必須屬性，字型檔案的位置，盡量寫多個來源（用逗号隔開）*/
font-weight:<font-weight>
font-style:<font-style>
}
在平時開發的時候，推薦大家上阿裡巴巴矢量圖示庫上去找字型，這裡為大家介紹一下阿裡巴巴矢量圖示庫的使用過程。
二、阿裡巴巴矢量圖庫使用
例如我們這裡要使用阿裡巴巴矢量庫的字型樣式，首先進入首頁點選上方導航欄的：
點選線上字型或者阿裡巴巴普惠體，進入到頁面後可以根據選擇添加字型，然後生成字型：
這裡我們可以通過兩種方式來引用字型，首先第一種是引用線上位址，這個我們可以直接将代碼直接複制下來：
代碼示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style type="text/css">
@font-face {
font-family: 'webfont';
font-display: swap;
src: url('//at.alicdn.com/t/webfont_k3a62swzr9m.eot'); /* IE9*/
src: url('//at.alicdn.com/t/webfont_k3a62swzr9m.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('//at.alicdn.com/t/webfont_k3a62swzr9m.woff2') format('woff2'),
url('//at.alicdn.com/t/webfont_k3a62swzr9m.woff') format('woff'), /* chrome、firefox */
url('//at.alicdn.com/t/webfont_k3a62swzr9m.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/webfont_k3a62swzr9m.svg#AlibabaPuHuiTiM') format('svg'); /* iOS 4.1- */
}
.test{
font-family: webfont;
}
</style>
</head>
<body>
<p class="test">Lorem ipsum dolor sit amet,
consectetur adipisi執子之手</p>
</body>
</html>
這裡需要注意的是，如果引用了樣式的話，隻有你輸入的字型樣式會改變，例如這裡，隻有“執子之手”的字型樣式發生了改變：
是以如果想要将字型樣式都發生改變，就需要将字型全都複制都圖示庫中生成字型。
第二種方法是進行本地下載下傳，下載下傳後的檔案是這樣的：
使用時點開demo.html，将代碼複制到自己的代碼當中：
并将檔案夾中除了demo.html外的檔案複制到自己指定的檔案夾中，我這裡是放在了fontcont檔案夾底下，注意這邊檔案路徑改變的話，代碼中的路徑要相應改變：
結果如圖：
三、字型圖示
字型圖示是以字型檔案的形式封裝，并通過CSS的@font-face聲明調用，達到簡單圖檔的效果。例如阿裡巴巴矢量圖庫首頁上的導航欄：
字型圖示的下載下傳和生成也是通過阿裡巴巴矢量圖庫擷取的，例如在首頁中随便找一個圖示并加入購物車：
在購物車中添加到自己的項目中：
就可以在項目中看到自己添加的素材：
要獲得代碼的話也有兩個方法，一個是擷取線上連結：
還有一個是下載下傳到本地，使用方法和字型樣式一樣，先将demo複制進去，再将除了demo外的檔案複制到檔案夾中：
這裡與字型樣式不一樣的是，引用圖示的話需要編碼，例如這裡的編碼：
在代碼中也要改變相應的編碼，當然也可以通過類名或id的方法來調用，原理同unicode類似：
這一部分到這裡就結束啦，有不足的地方還望大家指正啦，蟹蟹！