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需不需要安装字体还有待查证。