font-face加载任意字体和字体格式转换

web引入字体方法

引入字体格式

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

DEMO

<h2 class="neuesDemo">Neues Bauen Demo</h2>

@font-face {
    font-family:'NeuesBauenDemo';
    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.neuesDemo {
      font-family:'NeuesBauenDemo'}

下载字体网站

• ​​Google Web Fonts​​
• ​​Dafont.com​​

字体格式转换

• ​​http://freefontconverter.com/​​ 打开速度比较快
• ​​http://www.fontsquirrel.com/fontface/generator​​ 推荐中间位置，可以帮你生成CSS样式