揭秘CSS(第 1 版)
3.1.8 @font-face
阅读(

概述

CSS选择器

字体和文本

字体

字体调整

字体拉伸

字体变形

字体风格

字体粗细

字体大小

字体系列

@font-face

多年以来,人们一直被迫使用一组单调乏味的Web安全字体。当网页中需要使用一些优雅的字体时,设计师最常用的办法,就是把文字做成图片。但是,由于图片难以修改,也不利于网站SEO,因此不可能大范围使用该字体。

值得庆幸的是,CSS3的 @font-face 为设计师打开了一个全新的世界,它提供了一种自定义网页字体的方法,使设计师可以大胆使用任意自己想要的字体。

事实上,@font-face规则在CSS2中就已经存在,但随后在CSS2.1中被删除。真的,不骗你,早在1998年,IE4就对它提供了部分支持。现在,它又回来了,已经被重新引入到CSS3的字体模块中!

@font-face是一个CSS功能,它允许网页中使用自定义的网络字体,这些自定义的字体被放置在服务器上,从而摆脱对访问者计算机上字体环境的依赖。

简单的说,有了@font-face,只需将字体上传到服务器端,无论访问者计算机上是否安装该字体,网页都能够正确的显示。

@font-face 能够让加载服务器端的字体,并让浏览器找到对应的字体,得益于一套成熟的语法规则:

@font-face {
      font-family: <fontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      font-style: <style>;
      font-weight: <weight>;
}

其中,font-family 属性用来指定网络字体的名称,它可以是任意的字符串,建议最好使用字体本身的名称。font-* 属性分别表示该网络字体的风格和粗细。source 属性用来指定网络字体文件的存放路径,可以是相对路径或绝对路径;formart 属性用来指定网络字体的格式字符串,不同格式字符串对应的字体格式和后缀名见表 3‑2:

表 3-2 字体的格式字符串及后缀名
格式字符串字体格式后缀名
"woff"WOFF 格式.woff
"truetype"TrueType格式.ttf
"opentype"OpenType格式.ttf, .otf
"embedded-opentype"Embedded OpenType格式.eot
"svg"SVG Font格式.svg, .svgz

要在网页中使用自定义的网络字体,必须先将字体文件上传到服务器的某个地方,然后,再使用 @font-face 规则定义网络字体。

定义网络字体时,font-family 和 src  都是必需的属性,通过 font-family 指定字体的名称,通过  src  指定字体资源文件的存放路径:

@font-face {
    font-family: DroidSans;
    src: url(DroidSans.woff);
}

上述代码定义了一个网络字体,字体名称为DroidSans,字体文件为DroidSans.woff,并与CSS文件保存在相同目录中。

不过,这里定义的字体并不会有任何实际效果,因为还没有真正将它应用到网页中。要将网络字体 DroidSans 应用到网页中,还需在CSS选择器中,将 font-family 属性的值设置为 @font-face规则中定义的字体名称。如:

h1 {
    font-family: DroidSans;
}

定义网络字体后,页面上任何引用该字体的元素,都将按该规则来渲染文本。因此,页面上的所有 h1 标题,都将使用自定义的DroidSans字体进行渲染。并且,对于 h1 标题,浏览器默认还会使用粗体显示。

然而,此时呈现的粗体,并不是真正的粗体,而是伪粗体,这是因为一个网络字体文件只对应一种风格、一种粗细。因此,要使用真正的粗体,还需要单独创建一个@font-face规则,在该规则中对 font-family 进行重命名,并提供粗体对应的字体文件,同时将 font-weight 属性设置为 bold:

@font-face {
    font-family: DroidSans_bold;
    src: url(DroidSans_bold.woff);
    font-weight: bold;
}

同理,如果要使用斜体加粗体,还要单独创建另一个@font-face规则,并提供粗斜体对应的字体文件,同时将 font-style 属性设置为 italic,font-weight 属性设置为 bold。当然,如果某种Web 字体没有粗体、斜体、或粗斜体版本,而我们又对文本添加了这些样式,浏览器就会显示伪样式。

一个现实的问题是,虽然具有许多不同格式的Web字体,但各种浏览器仅支持这些格式的不同子集。因此,为了得到更多浏览器的支持,一个折中的办法是提供多种字体,并在@font-face规则中定义多个url,中间用逗号隔开。如果浏览器无法识别第一个字体,它会依次尝试后面的字体,直到找到一个可用的字体为止。如,下面的写法几乎可以让所有浏览器都有一个可用的字体:

@font-face { 
    font-family: 'webFont'; 
    src: url('webFont.eot');                                     /* IE9 兼容模式*/ 
    src: url('webFont.eot?#iefix')  format('embedded-opentype'), /* IE6~IE8 */ 
         url('webFont.woff')  format('woff'),                    /* 现代浏览器 */ 
         url('webFont.ttf')  format('truetype'),                 /* Safari, Android, iOS */ 
         url('webFont.svg#svgFontName')  format('svg');          /* Legacy iOS */ 
}

当然,需要注意的是,字体文件可能比较大,并且每增加一个样式和粗细版本都会引入一个新的字体文件,每个文件都需要额外的HTTP请求,从而影响性能。所以,在使用网络字体前,需要仔细斟酌,判断是否真的有必要在自己的网站上使用它,以及如何正确使用它。

除了将网络字体应用于文本外,还可以使用网络字体在网页上绘制图标。网上有很多字体图标资源,比如在Bootstrap中,可以使用Glyphicon Halflings 或Font Awesome等字体图标。

下面以Glyphicon Halflings 字体为例,来说明一下如何在网页中使用字体图标。假设在网页上有 5 个span 元素,使用Glyphicon Halflings字体,在每个 span 元素中生成一个播放器按钮图标:

<span></span><span></span><span></span><span></span><span></span>

首先,下载Glyphicon Halflings的字体文件。Glyphicons Halflings 一般是收费的,但他们的作者允许 Bootstrap 免费使用(向作者致敬)。因此,可以从Bootstrap官网下载编译后的Bootstrap版本,在 fonts 目录中就包含四种格式的Glyphicon Halflings字体文件。

然后,在CSS中,通过@font-face规则定义网络字体,并在 span 元素中使用该字体。同时,根据网站的配色风格,设定合适的文本颜色:

@font-face  {
    font-family: 'Glyphicons Halflings';
    src: url('bootstrap/fonts/regular.eot');
    src: url('bootstrap/fonts/regular.eot?#iefix') format('embedded-opentype'), 
         url('bootstrap/fonts/regular.woff') format('woff'), 
         url('bootstrap/fonts/regular.ttf') format('truetype'), 
         url('bootstrap/fonts/regular.svg#regular') format('svg');
} 
span {
    color: #444; 
    font-family: 'Glyphicons Halflings';
}

字体图标的原理,基本都是使用字符或实体字符来生成字体图标。因此,就可以使用伪元素,在元素的前面或后面,插入特定的字符或实体字符,就能得到相应的图标。不同的字体,插入的字符可能不同,Glyphicon Halflings字体中,播放器按钮对应的字符如下:

span:nth-child(1):before {
    content: "\e069";
}
span:nth-child(2):before {
    content: "\e071";
}
span:nth-child(3):before {
    content: "\e072";
}
span:nth-child(4):before {
    content: "\e075";
}
span:nth-child(5):before {
    content: "\e077";
}

就这么简单,运行结果如图 3‑10 所示:

字体图标
图3-10 字体图标

使用字体图标的好处是,如果要改变网站的配色风格,只需修改字体的颜色即可,非常方便。如果使用图像,要重新制作所有图标,非常麻烦。并且,字体图标还可以自由缩放而不会失真,而图像在缩放时可能会失真。

关于作者

歪脖先生,十五年以上软件开发经验,酷爱Web开发,精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等,著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验