网站优化之字体

标签：nio   font-face   ceo   处理   div   mbed   gbk   服务   firefox   

首先，处理字体，在网页：https://www.fontsquirrel.com

目前，@ font-face的支持

将其分别转成.eot  .woff  .ttf  .svg  ,然后利用@font-face

@font-face {
   font-family:‘fangZheng‘;
   src:url(‘../fontface/fangZheng/_gbk_m-webfont.eot‘);
   src:url(‘../fontface/fangZheng/_gbk_m-webfont.eot‘) format(‘embedded-opentype‘), /* IE6-IE8 */url(‘//at.alicdn.com/t/font_1474877045_270467.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */url(‘../fontface/fangZheng/_gbk_m-webfont.woff‘) format(‘woff‘) /* chrome、firefox */,url(‘../fontface/fangZheng/_gbk_m-webfont.svg‘) format(‘svg‘);
}
//使用的时候

.banner-text>p{font-family:‘fangZheng‘;}

拓展：

-使用Font Family Reunion这样的服务，选择一个可备用的字体，以免字体未加载完或加载失败，而出现的空白。

-Font Face Observer, 压缩后大小4KB，这块也不熟https://github.com/bramstein/fontfaceobserver

-字体加载器——Font Loading polyfill，这块还不熟。https://github.com/bramstein/fontloader

参考：http://www.w3cplus.com/css3/the-font-face-dilemma.html

网站优化之字体

标签：nio   font-face   ceo   处理   div   mbed   gbk   服务   firefox   

原文地址：http://www.cnblogs.com/wang715100018066/p/6001398.html