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

程序员文章站 2022-03-27 12:37:34

...

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'
   }

下载字体网站

字体格式转换

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