再探@font-face及webIcon制作

@font-face 不能說他是什么新東西了，在 CSS2.0 規范中就有了這玩意兒，IE4.0 開始就已經出現，只是當時用的不是特別廣泛，后來在 CSS2.1 草案中又被刪掉。隨着 web 的急速發展，@font-face 價值越來越凸顯，然后再次被納入 CSS3 草案中。@font-face 是個什么東西，本文不做過多說明，不太清楚的童鞋可以看這里 http://www.w3schools.com/css/css3_fonts.asp。需要強調的是他的書寫格式：

@font-face {
    font-family: <YourWebFontName>;
    src: <source> [<format>][,<source> [<format>]]*;
    [font-weight: <weight>];
    [font-style: <style>];
}

舉個例子：

@font-face {
    font-family: Gentium;
    src: url(http://example.com/fonts/Gentium.woff) format("woff");
}

p { font-family: Gentium, serif; }

format 是一個可選參數，他的作用是提示該資源 URI 所引用的字體格式，關於字體格式，可以看下面列表：

format 格式	Font 格式	后綴名
truetype	TrueType	.ttf
opentype	OpenType	.ttf, .oft
truetype-aat	TrueType with Apple Advanced Typography extensions	.ttf
embedded-opentype	Embedded OpenType	.eot
svg	SVG Font	.svg, .svgz

這堆麻煩的字體格式的出現，是因為各種瀏覽器對他們的支持程度不一樣：

瀏覽器	支持類型
IE6,7,8	僅支持 Embedded OpenType(.eot) 格式。
Firefox 3.5	支持 TrueType、OpenType(.ttf, .otf) 格式。
Firefox 3.6	支持 TrueType、OpenType(.ttf, .otf) 及 WOFF 格式。
Chrome,Safari,Opera	支持 TrueType、OpenType(.ttf, .otf) 及 SVG Font(.svg) 格式。

各瀏覽器具體的支持情況，可以戳這里。除了可以利用 font-face 引入各種炫酷的字體，還一個比較大的用途是使用它們替換網頁圖標。下面就說一說 @font-face 在 web 開發中比較有用的 webIcon。

本文地址：http://www.cnblogs.com/hustskyking/p/manufacture-font-face-in-web.html

一、fontCreator 制作 webIcon

這部分說的比較啰嗦，算是一個webicon制作教程吧~ 制作的圖片取自張鑫旭大哥的鑫表情包~

首先說一說什么是 web icon，可以看看這個頁面，http://fortawesome.github.io/Font-Awesome/，隨便瞄准網頁上的一個圖標，（chrome瀏覽器）點擊右鍵審查元素，可以看到頁面上的圖標都沒有使用圖片，而是用的特殊的字體：

//html
<i class="fa fa-flag"></i>

//css
.fa-flag:before {
    content: "\f024";
}

從網頁資源列表中可以查看到該網頁使用了多種字體：

也可以去看看我寫的一個 DEMO

1. 編碼與webIcon

編碼和字體沒有關系，但編碼和字符是一一對應的，比如 "\u674e" 對應的是 “李”，"\u9756" 對應的是“靖”。而字體在這里有個什么對應關系呢？不同的字體中顯示同一個 unicode 編碼，看到的效果是不一樣的，我們可以讓正楷的 "李" 對應 "\u674e"，也可以用行楷對應，當然我們也可以用一張圖片來對應。Web Icon 也就是用圖片來對應一些 unicode 碼。

但是這里存在一個問題，我們用一張圖片來對應 “李” 字，倘若想輸入一個正常的“李”字，該怎么去對應呢？ Unicode 包含 0-0x10FFFF 共 1114112 個碼位，而漢字占用的碼位並不多，只有幾千個，在制作 webIcon 時可以選擇避開常用的字符集。當然， Unicode 編碼也給我們提供了碼位的專用區（Pricate Use Area），區間是 E000-F8FF，所以我們可以在這個字符集中放肆 DIY 屬於我們自己的字體。

2. fontCreator 介紹與字體制作

Web Icon 的制作，網上有很多在線工具，不過這些在線工具都是從已有的圖片中選擇對應關系，約束性比較大，fontCreator 是一款比較優秀的字體制作工具，它能夠很智能的將我們導入的圖片轉換成黑白色的位圖，我們可以編輯和修改各個位圖區域，按照自己的意願 DIY。

打開 fontCreator，新建一個字體： 

為了方便演示，我只保留了 A-Z 的字符，其他的全部刪除了。

選中 A ，右擊選擇導入圖片：

選擇 generate，生成字符內容，然后雙擊 A，進行細節的編輯（放大，平移）：

依次處理其他幾個字母。Ctrl+S 保存為 barret.ttf。P.S：由於導入表情調整大小位置過於繁瑣，我只做了 A-I 這幾個碼位對應的符號，測試的時候使用字母 A-I 測試即可~

3. 本地測試

為了方便本地測試，我們先安裝這個字體：

打開記事本，選擇字體為 barret，字號調大一點，輸入 BCDEF 等字符，看看效果： 

是不是驚呆了，呵呵~

字體文件下載：barret.ttf

4. 網頁測試

網頁測試之前，需要先轉化下格式，至於原因在前言部分我已經說了。我們拿到的是 ttf 的字體格式，為了兼容所有的瀏覽器，必須修改進行格式轉換。

進入http://www.fontsquirrel.com/tools/webfont-generator，選擇字體，點擊 Agreement，然后點擊下載字體： 

轉換的拿到的是下面四個文件：

用下面一段代碼測試下結果：

<style type="text/css">
@font-face {
    font-family: 'barretregular';
    src: url('./font/barret-webfont.eot');
    src: url('./font/barret-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/barret-webfont.woff') format('woff'),
         url('./font/barret-webfont.ttf') format('truetype'),
         url('./font/barret-webfont.svg#barretregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
div {
    font-family: "barretregular";
    font-size:50px;
}
</style>

<div>
    B​C​D​E​F​G​H​I
</div>

也可以直接戳這個 DEMO

字體文件下載：barret.ttf and others

二、@font-face細節

根據 CSS3 草案中的描述，'@font-face' 規則允許使用鏈接到需要時自動激活的字體。這使得用戶可以使用在線的字體，而不僅僅拘泥於使用用戶端系統內的字體。font-face，拆開來理解，字體的面孔。不管是什么樣的面孔，對應的還是同一個碼位，而網頁設計者需要使用不同的字體來匹配當前的設計。

1. local()

上面的教程中我給出了兩個測試，一個是本地測試，一個是網頁測試，本地測試之前需要先安裝字體，如果本地已經有 barret 這個字體了，那我們的程序便沒有必要在重新去網絡上下載這個字體了。這是 CSS 程序應該這樣寫：

@font-face {
    font-family: 'barretregular';
    src: local("barret"),
         url('./font/barret.ttf');
}

在解析的時候，會先從本地查找是否有 barret 字體，如果沒有就忽略 local 語句，如果有的話就直接應用，忽略后面的 url 參數。除了獲取本地字體的作用之外，他還有另外一個 hack 用途，看下面這段程序：

@font-face {
    font-family: 'barretregular';
    src: url('./font/barret-webfont.eot');
    src: local("☺"), 
         url('./font/barret-webfont.eot?#iefix') format('embedded-opentype'),
         url('./font/barret-webfont.woff') format('woff'),
         url('./font/barret-webfont.ttf') format('truetype'),
         url('./font/barret-webfont.svg#barretregular') format('svg');
}

代碼中包含 local("☺")，local 中是一個笑臉，很顯然，這絕對不是一個字體名字，那他的作用是什么呢？前面我們說了，低版本IE 只支持 eot 文件格式的字體，上面的代碼中用到了兩個 src，低版本IE會應用第一個 src 的結果，但是，他的解析不會在第一個 src 位置停止，而是繼續往后讀，看到后面的 src 會發送一個無效的 http 請求。若在 url 前加一個 local 可以阻斷這個 http 請求的發送。

2. unicode-range

他的作用是定義字體支持的 Unicode 字符范圍，以 "U+" 或者 "u+" 開頭，默認是 "U+0-10FFFF"。

unicode-range 有三種形式：

1. 點，e.g. U+416
2. 分段，e.g. U+400-U+4ff
3. 通配符，e.g. U+4??(U+400-U+4FF)

舉幾個例子：

1. 大小寫字符以及標點符號

   unicode-range: U+0021-U+007B;

2. 大小寫字符和數字

   unicode-range:
       U+0030-U+0039, / 0-9 * U+0041-U+005A, / Uppercase A-Z / U+0061-U+007A; / Lowercase a-z /

3. 小寫字母，大寫字母 T，和 "." 號

   unicode-range:
       U+0054-U+0054, / T / U+0061-U+007A, / a-z / U+002E-U+002E; / . (period) */

 

這玩意兒有啥用途呢？

@font-face 有相關屬性 unicode-range，可用類似這樣的一段 CSS 來指定以中文字體顯示彎引號（這是 CSS3 特性，支持還不廣泛，但對於這種非關鍵樣式來說夠用了）：

@font-face {
    font-family: "Chinese Quotes";
    src: local("Some Chinese Font");
    unicode-range: U+2018-2019, U+201C-201D;
}
body {
    font-family: "Chinese Quotes", "Some Latin Font",
                 "Some Chinese Font", generic-family;
}

同理，這一招也可以用於破折號、間隔號等和西文標點共享碼位的中文標點。

可以戳知乎上的這一貼。

三、優缺點

優點有一大堆，圖標的顏色可以隨意修改，大小也是可以隨便控制的，不需要折騰圖片與文字的對齊問題，因為他本身就是文字，還可以使用陰影、文字漸變等 CSS3 的效果，總之就像操作一般字體一樣處理他們，該有的特點都有。

缺點也是十分明顯的，慢速網絡以及翻牆代理下情況特別糟糕。外國很多網站的頁面都使用了網絡字體，而網絡字體下載是需要時間的，有些字體可能還比較大，在下載完畢之前，頁面有文字的地方都沒有渲染出來，體驗不好的情況需要等待三五秒中。不過這種情況還是可以優化的，先用一般字體頂替樣式，等下載完畢了再利用 JS 來重新渲染，不過這個代碼比較高，而且也不好判斷何時下載完成了。

四、小結

本文的目的是展示 web icon 的從無到有的一個過程，一些網站提供了很多不錯的 webIcon 字庫，如果有需求可以直接去網站上下載，自己制作的話成本太高。

五、參考資料

• http://www.w3.org/TR/css3-fonts/#the-font-face-rule W3.ORG
• http://www.w3help.org/zh-cn/causes/RF1001 W3Help
• http://www.php100.com/manual/css3_0/@font-face.shtml Font-Face
• http://www.fontsquirrel.com/fontface/generator Tool