要想制做1些很酷的头顶部实际效果并且解决网站安全性字体样式而且不应用照片文档?那末就应用CSS3嵌入字体样式吧!
要想制做1些很酷的头顶部实际效果并且解决网站安全性字体样式而且不应用照片文档?那末就应用CSS3嵌入字体样式吧!
上1篇:CSS3实例教程(6):建立网站两列
要应用1款字体样式,大家最先必须应用‘@font-face’特性。这务必先提前准备好大家要用的字体样式文档。
虽然这样,让大家简易的学习培训1下字体样式层面的历史时间。@font-face特性从CSS2就早已考虑到了,但却自始至终在CSS2.1中都还没出現。CSS3尝试经它带到规范中来。
假如你手上沒有字体样式文档,你能够在dafont.com免费下载1些。
跨访问器适配性
现阶段仅有Safari适用@font-face特点(
Google Chrome开发设计版 2.0.156 也适用这个特点)。
留意,你的访问器必须1些時间载入字体样式文档,因此,就现阶段来讲,应用照片文档而并不是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的地区应用黑影实际效果。
.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…)