@font-face使用在线字体

Posted 2020-10-01 寻找薛定谔的猫

　　@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;

　　属性及其取指说明如下：

• font-family：设置文本的字体名称。
• font-style：设置文本样式。
• font-variant：设置文本是否大小写。
• font-weight：设置文本的粗细。
• font-stretch：设置文本是否横向拉伸变形。
• font-size：设置文本字体大小。
• src：设置自定义字体的相对路径或者绝对路径。

　　需要注意的是，低版本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);
}
h1{
   font-family: myFirstFont,verdana,sans-serif;
   font-size:4em;
}

运行效果如下：

查看在线运行效果

　　注意：嵌入外部字体的做法对于中文网站来说不太适用。因为一个中文字体文件小的也有几M，大的有十几M，这么大的字体，其下载过程让人难以忍受，同时服务器也不能接受如此频繁的下载请求。所以对于中文来说，如果只是想标题使用特殊字体，最好设计成图片。由于英文字体只有几十kb，与一张图片的大小差不多，如果有大量的文字需要使用该字体，存储、带宽方面就划算多了。

最后，附上两个在线字体转换格式的网站：

font2web：http://www.font2web.com/

freefontconverter：http://www.freefontconverter.com/