使用@font-face 嵌入网页字体

发布日期:2015-08-25 17:50:54
我们将用 @font-face 规则改进一下 北京网页设计...网站版面。
首先我们得有字体。 网上有很多很棒的字体资源站点, 有免费的也有收费的。 虽然 Google

也提供了免费的网页字体,且基本上都可使用 @font-face 规则,但我个人最喜欢 Font Squirrel 。另外还有 Typekit和 Font Deck上也有一些非常优秀的付费字体。

巧合的是,我在网站中使用的来自 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('embedded-
opentype'),
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 */
}
将所有相关样式中的 font-family 和 font-size 声明全部修改
网站的整体效果尚不完美,但现在字体完美还原了设计图中的效果。

相关文章

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计