Use Web Fonts and the @font-face CSS Method

预备知识

CDN-hosted & FontSquirrel

fontsquirrel

如何设置font-face

Web Fonts的知识

 

项目总结：在实际项目中置入MyriadPro Cond字体。这里可以下载到convert好的MyriadPro字体。

1：Good structure for the saved fonts：

最好把调用font-face的css和字体放在同一个文件夹下：

　　或者　　

2：检查调用字体的css里是否有写font-face

@charset "UTF-8";



@font-face {

    font-family: 'MyriadPro Cond';　　//用作font-famialy调用之用

    src: url('MyriadPro-Cond.eot');

    src: url('MyriadPro-Cond.eot?#iefix') format('embedded-opentype'),

         url('MyriadPro-Cond.woff') format('woff'),

         url('MyriadPro-Cond.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: "MyriadPro Cond";

    src: url('../Fonts/MyriadPro-Cond.eot');

}



/* CSS Document */

.flexigrid {

    font-family: 'Archivo Narrow', sans-serif;

    font-size: 11px;

    position: relative;

    border: 0px solid #eee;

    overflow: hidden;

    color: #000;

}



.flexigrid.hideBody {

    height: 26px !important;

    border-bottom: 1px solid #ccc;

}

.....

3：检查是否调用font-famialy是否对：

......



#firsttr th div{

    font-family: 'MyriadPro Cond', 'Archivo Narrow', serif;

    font-size: 10px;

}



#secondtr td div{

    font-family: 'MyriadPro Cond', 'Archivo Narrow', serif;

    font-size: 10px;

}



......

 总结：经过试验，只要按照上面的方法设置字体，client端不需要安装字体便可以显示，server需不需要安装字体还有待查证。