网页在线加载自定义字体


对于一些不大常见的页面显示效果,设计师以前的做法一般是采用图片方式替换特殊字符显示,但是这样带来的一大问题就是大大增加了网页加载负担。那能不能让网页加载自定义的字体呢?当然可以。

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

[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;
}
[/css]

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

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

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

发表评论