CSS3魔法堂：認識@font-face和Font Icon - fsjohnhuang－IT工程師數位筆記本

文章出處

一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

過去我們總通過圖片來美化站點的LOGO、標題、圖標等，而現在我們可以通過@font-face獲取另一種更靈活的美化方式。

二、看看例子　　　　　　　　　　　　　　　　　　　　　　　　　　　

/* 定義 */
@font-face {
    font-family: 'MicrosoftYaHei';
    src: url('MicrosoftYaHei.eot'); /* IE9 Compat Modes */
    src: url('MicrosoftYaHei.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('MicrosoftYaHei.woff') format('woff'), /* Modern Browsers */
             url('MicrosoftYaHei.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('MicrosoftYaHei.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
   }

/* 使用 */
body{
  font-family: "MicrosoftYaHei";
}

說起讓人感到十分驚訝，那就是IE4開始已經支持@font-face了，只是近些年才被大家廣泛使用而已。

而@font-face的好處是即使系統沒有該字體我們也能使用；缺點就是需要瀏覽器需要下載字體，因此消耗用戶流量，并且首次下載會造成頁面打開延遲。。

二、語法規則　　　　　　　　　　　　　　　　　　　　　　　　　　　

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

font-family: <YourWebFontName> ：自定義字庫名稱（一般設置為所引入的字庫名），后續樣式規則中則通過該名稱來引用該字庫。
src ：設置字體的加載路徑和格式，通過逗號分隔多個加載路徑和格式
srouce ：字體的加載路徑，可以是絕對或相對URL。
format ：字體的格式，主要用于瀏覽器識別，一般有以下幾種——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。
src屬性后還有一個 local(font name) 字段，表示從用戶系統中加載字體，失敗后才加載webfont。

src: local(font name), url("font_name.ttf")

三、字體格式　　　　　　　　　　　　　　　　　　　　　　　　　　　　

對于@font-face而言，兼容性問題就是各瀏覽器所能識別的字體格式不盡相同。
TrueType格式(.ttf)
Windows和Mac上常見的字體格式，是一種原始格式，因此它并沒有為網頁進行優化處理。
　瀏覽器支持：IE9+,FireFox3.5+,Chrome4.0+,Safari3+,Opera10+,IOS Mobile Safari4.2+
OpenType格式(.otf)
　以TrueType為基礎，也是一種原始格式，但提供更多的功能。<br/>
　瀏覽器支持：FireFox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,IOS Mobile Safari4.2+
Web Open Font格式(.woff)
　針對網頁進行特殊優化，因此是Web字體中最佳格式，它是一個開放的TrueType/OpenType的壓縮版，同時支持元數據包的分離。<br/>
　瀏覽器支持：IE9+, FireFox3.5+, Chrome6+, Safari3.6+,Opera11.1+
Embedded Open Type格式(.eot)
IE專用字體格式，可以從TrueType格式創建此格式字體。
　瀏覽器支持：IE4+

SVG格式(.svg)
基于SVG字體渲染的格式。
瀏覽器支持：Chrome4+, Safari3.1+, Opera10.0+, IOS Mobile Safari3.2+

為解決兼容性問題，Paul Irish寫了稱為Bulletproof的一個獨特的@font-face語法：

 @font-face {
    font-family: 'YourWebFontName';
    src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
    src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
             url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
             url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
   }

四、獲取Web字體　　　　　　　　　　　　　　　　　　　　　　　　

到Google Web Fonts和Dafont.com下載.ttf格式字體，然后通過Font Squirrel來生成.woff等格式的字體。

以下站點也可以獲取Web字體：

http://webfonts.fonts.com/

http://typekit.com/

http://kernest.com/

http://nicewebtype.com/fonts/

五、注意事項　　　　　　　　　　　　　　　　　　　　　　　　　　

1. @font-face遵循先定義后使用原則；

2. 由于中文字體太大，因此建議若中文LOGO還是使用圖片。而英文LOGO則可使用@font-face代替圖片；

3. @font-face無效有可能是字體的加載路徑錯誤；

4. FireFox中@font-face的字體加載路徑使用相對路徑時，可能會失敗，具體原因和解決辦法如下：

a). 使用絕對路徑可解決問題；

b). 在file uri scheme的情況下（file:///），由于FireFox默認的file uri origin策略十分嚴格，不同路徑等級則無法訪問。所以相對路徑被視為跨域操作，因此字庫加載失敗。可通過 about:config 進入瀏覽器設置界面，然后將 security.fileuri.strict_origin_policy 設置為false即可；

c). 在http/https uri scheme的情況下（http:///或https:///），則需要對.eot、.ttf和.woff等字體文件的響應頭中加入 Access-Control-Allow-Origin: * ，從而允許跨域請求。

六、Font Icon　　　　　　　　　　　　　　　　　　　　　　　　

大家應該使用過 © 這類符號實體，從而在頁面上顯示一些無法通過鍵盤直接輸入的符號。但這類符號實體是固化在瀏覽器中，沒辦法對其進行自定義，所以我們往往會使用圖片來代替。不過通過@font-face來實現的Font Icon，我們可以自定義并使用各種符號實體——這些符號實體正確來說應該叫做Web實體符。

Web實體符不像HTML實體那樣規定必須以 &entity_name 、 &#entity_number 形式表示，而是更靈活的表示方式（如字母A就代表某個字體圖標等）

首先我們要獲取為Font Icon而設計的字體

1. Guifx字體

2. WebSymbols字體

3. Font Awesome

由robmadole和supercodepoet兩大師在Bootstrap Icon的基礎上將Icon圖片換成Font Icon。

然后按第二節的方式使用即可。元素的font-family值為所定義的@font-face時，該元素下的字符則會自動渲染為對應的Font Icon。

七、自定義Font Icon　　　　　　　　　　　　　　　　　　　　　　

由于使用既定的Web字體庫需要將整個字體庫都下載下來，而實際上用到的Font Icon則只有數個而已，因此通過自定義Font Icon則可以個性化且減少字體庫體積。

工具：Fontomas提供四種字體來制作Icon。分別是Entypo,IconicFill,IconicStroke,WebSymbolsRegular。
Fontomas提供的是SVG格式字體，我們可以通過FontSquirrel或OnlineFontconverter來生成其他格式的字體。

另外還有fontforge工具來自定義Web字體，具體請見@張鑫旭的《fontforge制作自定義字體及在手機上應用舉例》

若要對已有的字體進行修改而不僅僅是提取的話可以是用IcoMoon，具體還是參考@張鑫旭的《如何靈活利用免費開源圖標字體-IcoMoon篇》

八、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　

若有紕漏請大家指正，謝謝。

尊重原創，轉載請注明來自：http://www.cnblogs.com/fsjohnhuang/p/4320083.html ^_^肥仔John

九、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

http://www.w3cplus.com/content/css3-font-face
http://stackoverflow.com/questions/2856502/css-font-face-not-working-with-firefox-but-working-with-chrome-and-ie
http://www.dynamicdrive.com/forums/showthread.php?63628-font-face-not-working-in-Firefox-5
http://www.w3cplus.com/css3/web-icon-with-font-face
http://www.webhek.com/tag/web-font/
http://www.paulirish.com

文章列表