首先前端都知道我們可以定義web上面文字的fontfamily。
css:但是這種情況下我們只能用系統預設的一些字型，限制比較大。比如微軟雅黑就是windows下面才有。.test
html:
class="
test
">iconfont字型原理
其實css是可以自定義字型的，所以我們可以載入自己的字型。
使用@font-face定義乙個字型family：
css:這樣我們就可以用自定義字型渲染這些文字了。@font-face .testhtml:
iconfont字型原理
每乙個字都有對應的unicode。比如我們在web上輸入我跟輸入我是一樣的。瀏覽器會自動幫你找到對應的圖形去渲染。
當然因為相容性的問題，不同的瀏覽器需要載入不同格式的字型，所以我們要同時支援四種字型。我們來看下乙個字型的樣子。
我們可以通過一些軟體開啟字型，比如fontforge，fontlab。
比如下面的方正大草字型：
我們開啟看下：
可以看到我這個字對應的的圖形就是我們在網頁上看到的樣子。另外注意左上角的unicode。是6211，也就是我們的另一種表現形式。
再雙擊可以看到我這個圖形的樣子：
其實就是一些路徑。而這個路徑可以用ai，ps，sketch等等來畫，畫完貼上到這裡。
所以我們就可以做一些事情了，我們可以去改造字型，把乙個字對應的圖形換成我們設計師設計的樣子，處理好相容性就成了我們iconfont的1.0。
當年iconfont1.0是怎樣的流程呢：
由設計師手動修改ttf字型對應的圖形，我們人工轉換出另外四種字型。
這樣前台就可以用unicode去引用，就是我們第一代的iconfont的原理。這個成本有點大。
其實我們注意到裡面有個svg的字型。你用文字編輯器開啟會發現他是xml格式的，每個字的圖形對應了乙個路徑。這個路徑就是我們svg裡面的path對應的序列。
好了於是我們有了乙個全新的思路，由設計師上傳svg，我們儲存下來，然後大家自由組合，由平台拼出對應的svg字型，然後再轉換到不同的其他格式的字型。
iconfont及自定義字型
iconfont 將iconfont拆開來看，就是icon 圖示 和font 字型 簡單的說iconfont就是利用字型工具把我們平時網頁上用的圖形圖示轉換成網頁字型。其實跟字型差不多，字型對應的是文字，iconfont對應的是圖示 iconfont的優勢 1 相比的大小容量，iconfont幾乎是...
iconfont阿里字型使用
step1.搜尋圖示，加入購物車。進入購物車頁面後，新增至專案。step2.font class 生成 該 加上字首http 可用瀏覽器開啟，以檢視這個css檔案 css檔案裡面的內容如下 font face iconfont icon cart before icon gouwuche befor...
伺服器端字型和iconfont
1 伺服器端字型 在css3之前，頁面文字所使用的字型必須已經在客戶端中被安裝才能正常顯示，在樣式表中允許指定當前字型不能正常顯示時使用的替代字型，但是如果這個替代字型在客戶端中也沒有安裝時，使用這個字型的文字就不能正常顯示了。為了解決這個問題，在css3中，新增了web fonts功能，網頁中可以...