CSS3系列教程:嵌入字体/网络字体

想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件？那么就使用CSS3嵌入字体吧！

要使用一款字体，我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。

尽管这样，让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了，但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。

如果你手上没有字体文件，你可以在dafont.com下载一些。

跨浏览器兼容性

目前只有Safari支持@font-face特性(Google Chrome开发版 2.0.156+也支持这个特性)。

注意，你的浏览器需要一些时间加载字体文件，所以，就目前来说，使用图片文件而不是CSS样式的用户体验会更好些。

CSS3嵌入字体

上面的效果可由下面的样式实现：

@font-face {
	font-family: qianduanNet;
	src: url("SketchRockwell.ttf");
}
.fontFace{
	font-family: qianduanNet;
	font-size: 3.2em;
	letter-spacing: 1px;
	text-align: center;
}

我们也可以对使用font-face的地方使用阴影效果。

font-face-shadow

.fontFaceShadow{
	font-family: qianduanNet;
	font-size: 3.2em;
	letter-spacing: 1px;
	text-align: center;
	text-shadow: 3px 3px 7px #111;
}

浏览器支持：

Firefox(3.05+…)
Google Chrome(1.0.154+…)
Google Chrome(2.0.156+…)
Internet Explorer(IE7, IE8 RC1 )(IE7+支持eot格式的字体文件)
Opera(9.6+…)(支持文字阴影)
Safari(3.2.1+ windows…)

CSS3系列教程|前端观察

特别声明，本系列文章译自：Zen Elements，非常感谢Alex的辛勤工作。

Special Staterment: this series posts were translate from Zen Elements, thanks Alex for his great work so much.

Rating: 9.7/10 (7 votes cast)

作者: 神飞
爱好前端设计与开发，崇尚一目了然的设计。现居深圳。 Follow me on twitter @qianduan。

您或许也会喜欢：

如果你喜欢本文，欢迎订阅本站以获得本站最新内容。

5 个评论

楼主好 发表于Jan 10, 2010 at 16:33
楼主好，你这个该更新了，firefox，opera，chrome版本都已经有更新里了
Reply

前端观察

专注于网站前端设计与前端开发