网页在线加载自定义字体
W3C组织已经在CSS3中加入了@font-face属性，加载自定义字体。兼容Chrome，Firefox，IE等主流浏览器。我们来自定义一个字体。名称自定义为“Downlink”，字体文件名是“Downlink.ttf”等（好几个格式），CSS举例如下：
1@font-face {
2 font-family: 'Downlink';
3 src: url('Downlink.eot');
4 src: url('Downlink.eot?#iefix') format('embedded-opentype'),
5 url('Downlink.woff') format('woff'),
6 url('Downlink.ttf') format('truetype');
7}
8.font {
9 font-family: Downlink,sans-serif,宋体;
10 font-size: 26px;
11}
12
看到上面可能会发现，咦？有好几种字体格式呀。是的，eot字体用于IE浏览器，ttf字体用于Chrome、FireFox、Opera、Safari浏览器。而且当加载网页时，比如IE浏览器，会只请求eot格式的字体，不会加载ttf格式的那个。
顺便给一个TTF转EOT的在线网站，转换后下载压缩包里还包含如何加载的标准语法举例。
评论 (0)