前端观察

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

on css, css3, 字体, 嵌入字体

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

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

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

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

跨浏览器兼容性

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

所有浏览器都支持font-face。

CSS3嵌入字体

font-face

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

@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;
}

CSS3系列教程|前端观察

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

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

CSS3系列教程:透明度