自定义网页字体

我在网站中使用的来自Font Squirrel 的字体都是免费的（我承认我抠门 :)）。
这些字体包括Bebas Neue、Bitstream Vera Sans 和Collaborate Thin。从Font Squirrel 上下
载的@font-face 包是一个ZIP 文件，里面包含该字体各种格式的文件（WOFF、TTF、
EOT 和SVG），以及一个用来演示字体调用规则的stylesheet.css 文件。例如，使用
Bebas Neue 字体的规则如下：
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘BebasNeue-webfont.eot’);
src: url(‘BebasNeue-webfont.eot?#iefix’) format(‘embeddedopentype’),
url(‘BebasNeue-webfont.woff’) format(‘woff’),
url(‘BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘BebasNeue-webfont.svg#BebasNeueRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
和浏览器私有前缀的原理类似，浏览器会根据自身特性应用列表中能识别的样式，忽略
无法识别的样式。用这种方法能保证无论什么浏览器都有一个可用字体。
上面这段代码对“复制粘贴党”来说很方便，但需要注意字体文件的存放路径。比如我
一般会将ZIP 包中的字体文件存放在一个专门的fonts 文件夹，该文件夹与css 文件夹
平级。因此我将上面这段代码拷贝到样式表文件中之后，还需要对文件路径做点修改，具体如下所示：
@font-face {
font-family: ‘BebasNeueRegular’;
src: url(‘../fonts/BebasNeue-webfont.eot’);
src: url(‘../fonts/BebasNeue-webfont.eot?#iefix’)
format(‘embedded-opentype’),
url(‘../fonts/BebasNeue-webfont.woff’) format(‘woff’),
url(‘../fonts/BebasNeue-webfont.ttf’) format(‘truetype’),
url(‘../fonts/BebasNeue-webfont.svg#BebasNeueRegular’)
format(‘svg’);
font-weight: normal;
font-style: normal;
}
接下来就是给相关样式设置正确的字体和粗细（如果需要）。此处我想将导航链接文字的
字体修改为Bebas Neue：
nav ul li a {
height: 42px;
line-height: 42px;
text-decoration: none;
text-transform: uppercase;
font-family: ‘BebasNeueRegular’;
font-size: 1.875em; /30 ÷ 16 /
color: black;
}
替换字体之后一般还需要修改字体大小。不过我们之前已经将字体换算过程写在了注释
里，那就很容易依此修改了。如果设计图和CSS 代码都使用同一款字体，那会有一个额
外的好处，你可以直接从设计图中获取字体大小。比如我们例子中的设计图对“EVERY
YEAR…”开头的这段文字大小设定为102 像素，所以直接使用百试不爽的“目标元素尺
寸÷上下文元素尺寸=百分比尺寸”公式，将文字大小转换为相对尺寸：

content h1 {

font-family: Arial, Helvetica, Verdana, sans-serif;
text-transform: uppercase;
font-family: ‘BebasNeueRegular’;
font-size: 6.375em; /* 102 ÷ 16 */
}

真正的响应式字体单位还不能广泛使用
当前的CSS3 字体模块工作草案中引入了视口相对字体。相对单位vw（视口宽度）、
vh（视口高度）和vm（视口最小边长，即vm 和vh 中较小的一个）在
获得浏览器广泛支持之后，能为我们节省大量开发时间。悲哀的是目前
除了IE 9 之外，其他浏览器都不支持视口相对单位。
摘取自：web设计：html5和css3实战