CSS3魔法堂：認識@font-face和Font Icon

1、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  過去咱們總經過圖片來美化站點的LOGO、標題、圖標等，而如今咱們能夠經過@font-face獲取另外一種更靈活的美化方式。

 

2、看看例子　　　　　　　　　　　　　　　　　　　　　　　　　　　

/* 定義 */
@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的好處是即便系統沒有該字體咱們也能使用；缺點就是須要瀏覽器須要下載字體，所以消耗用戶流量，而且首次下載會形成頁面打開延遲。。

 

2、語法規則　　　　　　　　　　　　　　　　　　　　　　　　　　　

/* 定義字體 */
@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")

 

3、字體格式　　　　　　　　　　　　　　　　　　　　　　　　　　　　

對於@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 */
   }

 

4、獲取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/

 

5、注意事項　　　　　　　　　　　　　　　　　　　　　　　　　　 

  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: * ，從而容許跨域請求。

 

6、Font Icon　　　　　　　　　　　　　　　　　　　　　　　　

 你們應該使用過 &copy; 這類符號實體，從而在頁面上顯示一些沒法經過鍵盤直接輸入的符號。但這類符號實體是固化在瀏覽器中，沒辦法對其進行自定義，因此咱們每每會使用圖片來代替。不過經過@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。

 

7、自定義Font Icon　　　　　　　　　　　　　　　　　　　　　　

  因爲使用既定的Web字體庫須要將整個字體庫都下載下來，而實際上用到的Font Icon則只有數個而已，所以經過自定義Font Icon則能夠個性化且減小字體庫體積。

  工具：Fontomas提供四種字體來製做Icon。分別是Entypo,IconicFill,IconicStroke,WebSymbolsRegular。
  Fontomas提供的是SVG格式字體，咱們能夠經過FontSquirrel或OnlineFontconverter來生成其餘格式的字體。

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

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

 

8、總結　　　　　　　　　　　　　　　　　　　　　　　　　　　　 

  如有紕漏請你們指正，謝謝。

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

 

9、參考　　　　　　　　　　　　　　　　　　　　　　　　　　　　 

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