google font和@font-face

會使用google字體

---

 

網址：

http://www.google.com/fonts/

 

選擇字體， quick use

 

引用css： <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

 

css文件中引用font-family： font-family: 'Lobster', cursive;

 

使用 @font-face 使用本地字體

---

 

 

網站logo如果英文字體使用@font face更加合適，中文字體使用圖片更加合適，中文字體文件比較大可能會影響網站的性能

語法：

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

 

eg：

  <h2 class="myFont">myFont</h2>

 @font-face {
    font-family: 'myFontDemo';
    src: url('../fonts/neues_bauen_demo-webfont.eot');
    src: url('../fonts/neues_bauen_demo-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/neues_bauen_demo-webfont.woff') format('woff'),
     url('../fonts/neues_bauen_demo-webfont.ttf') format('truetype'),
     url('../fonts/neues_bauen_demo-webfont.svg#NeuesBauenDemo') format('svg');
    font-weight: normal;
    font-style: normal;
  }

   h2.myFont{
      font-family: 'myFontDemo'
   }

 

獲取各類格式的字體文件eg woff等可使用font-squirrel工具：http://www.fontsquirrel.com/tools/webfont-generator

 

參考： http://www.w3cplus.com/content/css3-font-face