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