@font-face 使用自己的字体

日志记录 0 评论 • 672 阅读

前言

@font-face规则在CSS3规范中属于字体模块,该规则的推出对于网页设计来说是一个革命性的进步。在传统设计中,设计师不敢使用各种艺术字体类型,甚至是常规字体也需要慎重使用。因为设计师必须考虑每位浏览者的系统中是否安装了所有字体。有了@font-face规则,这个顾虑就可以放下了:只要在互联网上指定一种字体类型源,而不管用户电脑是否安装该字体,设计的网页都能够正确显示。
用较为专业的话来讲,@font-face能够加载服务器端的字体文件,让客户端浏览器显示客户端没有安装的字体。如果没有@font-face规则,浏览器只能够在客户端系统中寻找指定字体,这就给网页设计带来了很多限制,妨碍了设计师的创意设计,也就无法展现丰富多彩的字体艺术。

正文

@font-face规则的语法格式如下:

@font-face { <font-description> }

@font-face规则的选择符是固定的,用来引用服务端的字体文件。<font-description>是一个属性名值对,格式类似如下样式:

description: value;
description: value;
description: value;
{...}
description: value;

 属性及其取指说明如下:

浏览器兼容
需要注意的是,低版本IE浏览器只支持微软自有的.eot(Emberdded)字体样式,而其他浏览器都不支持这一格式。不过,从Safari3.1开始,网页重构工程师已经可以设置.ttf(TrueType)和.oof(OpenType)两种字体作为自定义字体了。

下面我们来看一个简单的示例:

/*引入自己指定的字体文件*/
@font-face{
   font-family: myFirstFont;
   /*eot格式兼容IE*/
   src:url(fonts/AdineKirnber.eot);
   /*ttf格式兼容非IE*/
   src:url(fonts/AdineKirnber.ttf);
}
div
{
font-family:myFirstFont;
}

效果演示,自己本地实测吧!

结语

指定自定义字体,可实现网页与众不同的字体效果,但不建议引入体积过大的字体,以免影响网页整体加载速度。
最后,附上两个在线字体转换格式的网站:
font2web:http://www.font2web.com/
freefontconverter:http://www.freefontconverter.com/
声明:本文节选自 博客园

添加新评论
二维码
评论留言