网页在线加载自定义字体

W3C组织已经在CSS3中加入了@font-face属性，加载自定义字体。兼容Chrome，Firefox，IE等主流浏览器。我们来自定义一个字体。名称自定义为“Downlink”，字体文件名是“Downlink.ttf”等（好几个格式），CSS举例如下：

@font-face { 
    font-family: 'Downlink';
    src: url('Downlink.eot');
    src: url('Downlink.eot?#iefix') format('embedded-opentype'),
         url('Downlink.woff') format('woff'),
         url('Downlink.ttf') format('truetype');
}
.font {
    font-family: Downlink,sans-serif,宋体;
    font-size: 26px;
}

看到上面可能会发现，咦？有好几种字体格式呀。是的，eot字体用于IE浏览器，ttf字体用于Chrome、FireFox、Opera、Safari浏览器。而且当加载网页时，比如IE浏览器，会只请求eot格式的字体，不会加载ttf格式的那个。

顺便给一个TTF转EOT的在线网站，转换后下载压缩包里还包含如何加载的标准语法举例。

http://www.fontsquirrel.com/fontface/generator

转自：http://www.singlex.net/3109.html