理篇

iconfont技術早就不是什么新技術了，我們iconfont.cn也已經做了快三年了。后來陸陸續續的來了很多新同學，可能只知道用這個，卻不知道它內部的原理，這里給大家同步下，知道了原理可以更好的去使用。

css加載自定義字體

首先前端都知道我們可以定義web上面文字的fontfamily。

1
2
3
4
5
6
7
8
9
10

css:
.test{
font-size: 16px;
font-family: '微軟雅黑';
}
html:
<span class="test">iconfont字體原理</span>

但是這種情況下我們只能用系統默認的一些字體，限制比較大。比如微軟雅黑就是windows下面才有。

其實css是可以自定義字體的，所以我們可以加載自己的字體。

使用 @font-face 定義一個字體family：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

css:
@font-face {
 font-family: 'iconfont';
src: url('//at.alicdn.com/t/font_1453702746_9938898.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1453702746_9938898.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('//at.alicdn.com/t/font_1453702746_9938898.woff') format('woff'), /* chrome、firefox */
 url('//at.alicdn.com/t/font_1453702746_9938898.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
 url('//at.alicdn.com/t/font_1453702746_9938898.svg#iconfont') format('svg'); /* iOS 4.1- */}.test{ font-size: 16px;
font-family: 'iconfont';}html:
<span class="test">iconfont字體原理</span>

這樣我們就可以用自定義字體渲染這些文字了。

每一個字都有對應的unicode。比如我們在web上輸入我跟輸入我是一樣的。瀏覽器會自動幫你找到對應的圖形去渲染。

當然因為兼容性的問題，不同的瀏覽器需要加載不同格式的字體，所以我們要同時支持四種字體。

字體內部

我們來看下一個字體的樣子。

我們可以通過一些軟件打開字體，比如fontforge，fontlab。

比如下面的方正大草字體：

我們打開看下：

可以看到我這個字對應的的圖形就是我們在網頁上看到的樣子。另外注意左上角的unicode。是6211，也就是我們的另一種表現形式。

再雙擊可以看到我這個圖形的樣子:

其實就是一些路徑。而這個路徑可以用ai，ps，sketch等等來畫，畫完粘貼到這里。

iconfont1.0

所以我們就可以做一些事情了，我們可以去改造字體，把一個字對應的圖形換成我們設計師設計的樣子，處理好兼容性就成了我們iconfont的1.0。

當年iconfont1.0是怎樣的流程呢：

由設計師手動修改ttf字體對應的圖形，我們人工轉換出另外四種字體。

這樣前臺就可以用unicode去引用，就是我們第一代的iconfont的原理。這個成本有點大。

iconfont2.0

其實我們注意到里面有個svg的字體。你用文本編輯器打開會發現他是xml格式的，每個字的圖形對應了一個路徑。這個路徑就是我們svg里面的path對應的序列。

好了于是我們有了一個全新的思路，由設計師上傳svg，我們存儲下來，然后大家自由組合，由平臺拼出對應的svg字體，然后再轉換到不同的其他格式的字體。

這里面的難點主要在，我們要分析svg。轉換出對應的path序列。用戶上傳的svg格式太多，大小不一。要做各種轉換，這里不展開了。

這就是我們的iconfont2.0，也就是目前線上跑的版本。

font-carrier

當然這一切都封裝好了，做了一個工具庫，font-carrier。

語法比較簡單，可以直接往一個字體里面添加svg，也可以拿到某個字對應的svg，最終導出四種兼容字體。

知道了原理，以后大家調試就比較簡單了，直接自己打開對應的svg字體，去看看你們對應的unicode的圖形是不是有問題就行了,下面我們說說使用上一些常見的問題。

使用

下面就可能會遇到的一些問題，做些簡單的解答。

字體沖突的問題

iconfont.cn平臺給出的font-face定義默認都是 iconfont的fontfamily，建議大家改掉，避免與其他項目字體（比如引用的公共組件里面的字體）沖突。

unicode取值的問題

unicode其實沒有特別的規定。

字體有幾個私有平面:

很早以前我們使用的五位數的，結果現在chrome支持不太好，后面建議大家使用第一個平面里的。

這樣用的好處是，字體沒有加載的時候，顯示的是一個框 口。而不是亂碼。

字體基線的問題

這是個艱難的決定。一臉無辜.jpg

中文字體沒有嚴格意義上的基線。我們參考了方正字體的基線：

中間的線是baseline,這個就是0這條線。對于一個字體來說，可以設置上邊界（ascent）跟下邊界（descent）。比如我們iconfont設置的是812，-212。

所以如果我們的圖標這么設計：

那么是可以基本對齊的。

但是我們發現用戶上傳圖標時喜歡撐滿整個框：

可以想像下，這種圖標跟字體一起展現，就會變得偏下了。

所以在支付寶的要求下，我們修改了基線。當我們把下偏移量設置的比較小，這樣基線相對就會在比較下面的位置。 這樣就算用戶上傳的圖標撐滿也沒關系了，因為普通的漢子是差不多三分之一，我們遷就一下，偏少一點，這樣基本就能對齊了。

于是帶來了一群不明真相的群眾的吐槽。但是又不得不做這個事情。

單個icon撐開的問題

有的時候設計師設計的icon會有多余的點，也可能當前上傳的svg邊界太大，于是導致我們的整個字體被撐開。

表現如下：

可以看到由于最左邊的icon把字體撐開了。導致大家展示除了問題，表現在頁面上是：

注意看里面的陰影，由于被撐開，導致它的邊界是不對的。我們刪掉這個圖標再生成字體就好了。

當然這里還有各種問題，字體清晰度，icon上傳svg規范問題，字體跨域問題，鋸齒問題等等。這些平臺基本都可以內部優化掉了，就不展開了。

結語

iconfont解決了我們以前大量使用圖片帶來的種種問題，但是也有自身的各種缺陷。比如不支持多色就是一個最大的致命傷，另外在不同瀏覽器下的表現不同，需要做各種兼容。

不久的將來iconfont應該會被svg symbol技術替換。可以參考這篇文章。

淘積木目前接入了webfont，直接用svg當作字體展現，實時預覽，也是一種新的突破。

iconfont.cn平臺目前也在做相關的改造，期待帶來新一輪的字體使用方式變革。

昨天我們知道了什么是rgba后，今天我們就來繼續學習css自帶的文字陰影樣式來制作字體模糊效果。在此之前我們先學習下文字陰影樣式text-shadow.

學習text-shadow屬性的使用

text-shadow屬性介紹

• text-shadow：x y blur color, …

• 參數 x橫向偏移 y縱向偏移 blur模糊距離 color陰影顏色

簡單用法

text-shadow:2px 2px 4px black

實戰練習

html代碼片段

<div class="box">每天學習一點點</div>

css樣式

.box{

width:50%;

height:200px;

margin: 50px auto;

color:rgba(0,0,0,1);

/*為了看的更清楚設置一秒的動畫效果*/

transition: 1s;

font:100px/200px "微軟雅黑";

text-align:center;

}