CSS3: @font-face

猫性男孩

想要制作一些很酷的头部效果并且不使用图片文件嘛？可以尝试一下 CSS3 里面的 @font-face。

代码如下：

01	@font-face {

[backcolor=rgb(248, 248, 248) !important]

02	font-family: qianduanNet;

03	src: url("SketchRockwell.ttf");

[backcolor=rgb(248, 248, 248) !important]

04

}

05

[backcolor=rgb(248, 248, 248) !important]

06	.fontFace{

07	font-family: qianduanNet;

[backcolor=rgb(248, 248, 248) !important]

08	font-size: 3.2em;

09	letter-spacing: 1px;

[backcolor=rgb(248, 248, 248) !important]

10	text-align: center;

11

}

但这需要你去下载字体，相对而言 Google Font Directory 就方便太多了。只可惜目前不支持中文。

不过简单的中文用英文代替，大家都可以看得懂的。嘿嘿，因此在 b3log 的新皮肤中头部使用到了Google Font Directory 中的两中字体，实际效果图如下。

你可以到 Google Font Directory 上面选择你喜欢的字体，然后点击进入，选择 use this font, 相应的添加 link 和 CSS 就可以搞定了；

或者使用 WebFont Loader, 它将为您提供更加多的使用方法。

本文是使用 B3log Solo 从 Vanessa 进行同步发布的
原文地址： http://vanessa.b3log.org/css3-font-face

原文链接：http://blog.csdn.net/vanessa219/article/details/6131527