CSS3之美(四):网页字体

CSS 新引入了 @font-face,我们终于可以在 Web 世界里也随心所欲地使用字体了。

@font-face规则

CSS3 字体模块最令人兴奋的事儿就是我们可以在网页中使用自定义字体了,它的核心语法就是 @font-face。其基本语法如下:

1
2
3
4
@font-face {
font-family: nmae;
src: local('font-name'), url('/path/filename.otf') format('opentype');
}

下面具体解释上面代码的含义:

  • font-family: 用于给自定义字体起个名字,当然,我们也可以使用多个用空格隔开的单词,只要把它们放入引号即可。
  • src: 即所引用字体的位置。该属性接受几个不同的值:
    • local(): 所引用字体本来的名字,它主要是用于检查用户计算机上是否已经安装了同名字体;
    • url: 所引用字体的网络位置,用于当字体在本地不可用时;
    • foramt: 用于指定字体类型,毕竟不同的设备可能使用不同类型的字体文件。

注意: src 属性的 local() 值后面有个逗号。

定义不同的风格

font-face 语法是非常简单的,但它只定义了一种字体风格。如果我们要使用同一字体的不同风格,就需要单独地定义每种字体的风格。为此,我们可以使用两种方法来实现:

  1. 重用相同的名称并把额外的描述符添加到 font-face 规则上:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    @font-face {
    font-family: 'Museo Sans';
    src: local('Museo Sans'), url('MuseoSans.otf') format('opentype');
    }
    @font-face {
    font-family: 'Museo Sans';
    font-style: italic;
    src: local('Museo Sans'), url('MuseoSans_Italic.otf') format('opentype');
    }
  2. 为每种字体样式提供独一无二的名称,并且在字体栈中单独去调用它们:

    1
    2
    3
    4
    5
    6
    7
    8
    @font-face {
    font-family: 'Museo Sans';
    src: local('Museo Sans'), url('MuseoSans.otf') format('opentype');
    }
    @font-face {
    font-family: 'Museo Sans Italic';
    src: local('Museo Sans'), url('MuseoSans_Italic.otf') format('opentype');

上面这两种方式,个人更为推荐第二种,清晰易懂,简洁明了。

真实字体风格VS人造字体风格

真实字体风格即字体源文件就是那种风格的,而人造字体风格指的是通过修改 font-style 属性让正常字体变为想要的风格。下面是代码对比:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
@font-face {
font-family: normal font;
src: local('normal font'), url('normal font.otf') format('opentype');
}
* {
font-family: "normal font";
font-style: italic;
}
/* 以上为真实字体风格 */
/* 以下为人造字体风格 */
@font-face {
font-family: italic font;
src: local('italic font'), url('italic font.otf') format('opentype');
}
* {
font-family: "italic font";
}

上述两种方式的差别还是有一定程度的:

  • 第一种方式源文件是普通字体,通过在使用时改变 font-style 属性值从而到达仿造的斜体效果
  • 而第二种方式源文件就是斜体风格的相应字体,使用时无需额外改变字体风格样式,是真实的斜体。

万无一失的@font-face语法

使用本地字体

src 属性的 local 值用于检查用户是否已经把定义的字体安装在了计算机上,如果用户做了,那么就可以直接应用本地拷贝,而不用再下载字体文件了。唯一遗憾的是,local 不受 IE9 以下版本的所有浏览器支持。

解决这个缺点的变通方案依赖于 IE8 及其以下版本只允许使用可嵌入开放型字体格式(Embeddable Open Type,EOT)。由于使用了 EOT,我们可以声明两次 src 属性:

1
2
3
4
5
@font-face {
font-family: name;
src: url('filenmae.eot'); /* 兼容 IE8 及以下版本 */
src: local('fontname'), url('filename.otf') format('opentype');
}

下一个缺点就是 Safari 浏览器使用不同的字体名称参数作为 local() 的值。字体通常有两个名称:一个完整的名称和一个 PostScript 名称。MAC 上的 Safari 需要使用 PostScript 名称,反之其他浏览器接受的是完整名称。解决这个问题是很简单的,只需指定两个 local() 值:

1
2
3
4
@font-face {
font-family: name;
src: local('fontname'), local('altfontname') url('filename.otf') format('opentype');
}

对于第一个 local()值,我们可以使用 PostScript 名称,而对于第二个 local() 值,可以使用其系列名称。

然而,使用字体管理程序可能会导致出现第三个缺点。在某些情况下,字体管理软件会显示不正确的字符或者打开一个对话框,询问用户使用字体的许可。解决这一缺点的唯一方式就是添加一个”空“值给 local,强制下载所定义的字体。这个空值只要是个单独字体就行啦。

所以,将这一节的所有解决方案综合在一起,我们会得到如下代码:

1
2
3
4
5
@font-face {
font-family: name;
src: url('filename.eot');
src: local('☺'), url('filename.otf') format('opentype');
}

字体格式

IE8 及其以下版本只支持专用的 EOT 格式,而现代浏览器允许使用更加通用的 TrueType 和 OpenType 格式。但是许多商用的字体开发商并不允许他们的字体以这种方式使用,因为这样会使得很容易地获得字体的非法拷贝。处于这个原因,Mozilla 跟一些字体开发商进行了协商,从而创建了网页开放字体格式 WOFF。另外,还有一些浏览器也接受可伸缩矢量图形(SVG)字体格式。

最终的万无一失语法

为了让选择的字体在每个平台上的所有浏览器上都具有相同的显示,我们需要使用的代码看上去应该像这样:

1
2
3
4
5
6
7
8
@font-face {
font-family: name;
src: url('filename.eot');
src: local('☺'),
url('filename.woff') format('woff'),
url('filename.ttf') format('truetype'),
url('filename.svg') format('svg');
}

下面介绍另一种可靠的新方法,是由一个大神提出来的

1
2
3
4
5
6
7
@font-face {
font-family: name;
src: url('filename.eot?') format(eot),
url('filename.woff') format('woff'),
url('filename.otf') format('otf'),
url('filename.svg') format('svg');
}

更多的字体属性

CSS3 网页字体模块并不仅仅重新引入了 @font-face 规则,它也重新定义唤醒了最先由 CSS2 提议的另外两个字体属性。

font-size-adjust

在 CSS 中使用字体栈的唯一缺点就是字体在尺寸上可能会发生变化。当首选字体不可用时,下一备用字体的高度不是我们所能预料的。为了解决这一问题,我们可以使用 font-size-adjust 属性。

1
E { font-size-adjust: number }

语法规则中的 number 是指小写字母 x 占所用字体的高度比例。font-size-adjust 属性值接受一个小数值。

font-stretch

一些字体系列包含了紧缩和加宽的变体,而 font-stretch 属性被提出用于访问这些变体,其语法如下:

1
2
E { font-stretch: keyword }
/* 设置对象中的字体是否横向拉伸变形 */

其中,font-stretch 属性值可取的关键字 keyword 有以下:

  • normal: (默认值)正常文字宽度
  • semi-condensed: 比正常文字宽度窄1个基数
  • condensed: 比正常文字宽度窄2个基数
  • extra-condensed: 比正常文字宽度窄3个基数
  • ultra-condensed: 比正常文字宽度窄4个基数
  • semi-expanded: 比正常文字宽度宽1个基数
  • expanded: 比正常文字宽度宽2个基数
  • extra-expanded: 比正常文字宽度宽3个基数
  • ultra-expanded: 比正常文字宽度宽4个基数