@font-face 实例

 

@font-face{
   
    font-family: 'pingfang';
    font-weight: 300;
    font-style: normal;
    src: url('../font/PingFangBold.ttf');
}
@font-face{
   
    font-family: 'PingFangMedium';
    src: url('../font/PingFangMedium.ttf');
}
@font-face{
    
    font-family:'PingFangLight';
    src:url('../font/PingFangLight.ttf')

}
@font-face{
    
    font-family: 'PingFangHeavy';
    src: url('../font/PingFangHeavy.ttf');
}

腾讯云首页参考写法 文件基本都在4-5KB 定义自定义字体qcloud-num

@font-face {
    font-family: qcloud-num;
    src: url(../../font/qcloud-num.eot);
    src: url(../../font/qcloud-num.eot?#font-spider) format('embedded-opentype'),url(../../font/qcloud-num.woff) format('woff'),url(../../font/qcloud-num.ttf) format('truetype'),url(../../font/qcloud-num.svg) format('svg');
    font-weight: 400;
    font-style: normal
}
/*
../../ 都替换成 http://imgcache.qq.com/open_proj/proj_qcloud_v2/qcloud_2015/
*/

html定义字体

'PingFangSC-Light','helvetica neue','hiragino sans gb','tahoma','microsoft yahei ui','microsoft yahei','simsun','sans-serif'