font-face 網路字型

指定網路字型.在自家網站使用伺服器端的字型

@font-face {
  font-family: myfont;
  src:  local("Helvetica Neue Bold"),              /*本機端*/
  url ( http://example.com/fonts/Gentium.woff ) ;  /*伺服器端*/
  /*url (ideal-sans-serif. woff) format("woff"),*/
  /*url (basic-sans-serif. ttf)  format("opentype");*/
  /*url (fonts.svg# simple)     format("svg");*/
  /* 使用 SVG 檔案中 id 為 'simple' 的字型 */
  font-weight: bold;
}

p { font-family: myfont, serif; }

font-face 圖標字體icon Font

指定繪製好的圖標或製作字體

  @font-face {
    font-family: ‘myfont’;
    src:  url ( ‘/icon. ttf ‘ )  ;   
  }

  h2 { font-family: ‘myfont’; }

  icon-home { display:inline-block; width:16px;height:16px;}

  icon-home:after { 
    font-family: ‘myfont’; 
    content: ‘ \f24f ’;  
    width:16px;
    height:16px; 
    margin-left:-16px;  
  }

  /*可以使用unicode編碼也可以使用具體的字符*/

各種字型格式與format() 指定方式的對應